Why you should use Tailwind CSS

Like many developers, I was a bit reluctant to use Tailwind CSS at first because in-line styling was historically frowned upon. But now that I’ve used it on so many projects, it’s hard for me to go back to vanilla CSS.

That’s because Tailwind solves arguably the biggest problem with CSS: confusing class names.

Separating HTML from styling can improve code organization initially. But as the codebase grows and more styles are added, it becomes increasingly difficult to keep track of what each CSS class does. And changing a class to modify the styling of one element can cause unwanted effects to other parts of the UI.

The solution to this is to use in-line styling. This way, you know exactly how each element will look like in the UI. Unfortunately, CSS attributes are quite verbose and using a bunch of them will make the code unreadable.

Tailwind solves this problem by using an abbreviated yet comprehensible syntax for CSS attributes, allowing the use of in-line styling in a manageable way. In fact, Tailwind syntax is up to 60% leaner than CSS resulting in way less code overall.

Alright, problem solved, right? Well, not quite. Because now we face the problem that CSS classes were created to solve in the first place: reusablitiy. If we're only using in-line styling, how do we reuse the same style on different elements?

To address this, we should re-think the way we style elements. Instead of having reusable CSS classes that are separate from the code, we should create components that are already styled using Tailwind, and then reuse those in our code. A corollary of this approach is that is also encourages us to write leaner and better organized code.

Here's how it works:

In the following example, I am creating an Article component that I am then using to dynamically render articles from a list. I styled the component using Tailwind classes. For instance, “p-4” is equivalent to setting a padding of 1 rem. The number 4 represents four quarters of a rem.

So, should you always use Tailwind?

Not necessarily. One disadvantage of Tailwind is that it takes some time to set up, so I wouldn’t recommend using it for smaller projects. For instance, I’m using vanilla CSS for this website and haven’t felt the need for an upgrade just yet. On the other hand, if your application is larger and requires a hefty style sheet, Tailwind might be best suited for your use case.

Overall, the choice whether to use Tailwind really depends on your specific needs. But if like me you’ve struggled to keep track of the different CSS classes in your application, then you might want to give Tailwind a try. There’s also a bunch of component libraries out there with out of the box styles that you can use. See https://blog.logrocket.com/10-best-tailwind-css-component-libraries/