.Tailwind
Gather ‘round, my friends, and let me tell you a tale as light as the wind. I’d love to spend just a few minutes telling you about a CSS framework entitled “Tailwind”. I’m in no way sponsored or reimbursed by Tailwind, its just a really solid design. So let’s npm install tailwindcss and get to work!
One of the biggest issues I have with styling templates such as Bootstrap and Semantic is the figurative handcuffs that are placed on you wrists to use it. I can’t count the number of times becoming frustrated because I was able to style certain elements with CSS, but others not so much. That sucks! I realize that they are meant to be a quick means by which to get content to the page, but when was a coder ever satisfied just getting information to render to the DOM? Users expect a better experience, and so do engineers. And why is it so damned difficult to get things aligned on the page? Despite all the technologies we have available at our fingertips, centering and aligning information seems to live at the bottom of a deeply-nested div well that contains no bottom.
Alright… alright.
Rant over.
I’m sorry.
It’s not you, Semantic and Bootstrap, it’s me.
Inherently the issue that I’m facing is I want to be able to use a template to get things up and running, and then to be able to refine those decisions with more precisely executed front-end code.
So then maybe the answer is not to find a template and modify it, but to find a template that doesn’t need modifying. Tailwind manages to achieve this with a veritable bevy of styling options, animations, and more.
Another big bonus here is the markup language used is very intelligible. Big ups to the folks at NerdCave for making this Tailwind cheat sheet… A cursory glance will show you language that actually looks like, well, language! I was able to use Tailwind with a lot more of my gut intuition than any other framework, due to these naming conventions.
Another big plus for ya boi is the fact that all styling occurs inline. Here’s an example from the Tailwind site…
Now all the styling is contained within the component that renders it. This makes a lot more sense for my squishy brain, then following the occasionally confusion hierarchy system for styling divs within CSS. Its also not made a ton of sense to me why, with the current push for further modularization of components, that CSS would not follow suit. But here we are! Its all right there, and its reads pretty well. A quick look at the above snippet shows us adding qualifiers for screen size/type, background styling, shape styling, and padding, just to name a few.
Oh! And while you are learning, VSCode has a plugin to help you remember class names!
I’ve barely scratched the surface of the power of Tailwind, but I’m very much looking forward to digging a little deeper with each project. Special thanks to my buddy Brian for turning me to this language. And rest assured, dear readers, the switch is flipped firmly to the “on” position.