Should You Use Tailwind CSS? (2024)

TL;DR: Yes, you should, especially if you’re starting a project from scratch. Below, I’ve also listed some cases where Tailwind might not be for you.

Tailwind is a CSS framework that allows you to style components directly from your HTML (or JSX) file.

It does so by adding predetermined classes (e.g., bg-red for a red background) which are not only more compact than traditional inline styles but also avoid the specificity problems that come with them.

1. Increases development speed

This might sound silly at first, but the fact that you’re coding both structure (HTML) and styling (CSS) in the same file DOES drastically increase coding speed. Especially because you’re skipping the step of changing files and looking for the corresponding style inside your CSS one.

2. Eliminates the need of naming elements

Since we’re styling HTML tags directly, there’s no need to name them or use methodologies like BEM or OOCSS. Naming things is among the biggest hassles in development (along with defining a decent project folder structure), and Tailwind allows you to skip it, which also helps with the first benefit.

3. Reduces the chances of error in styling

Although it is highly customizable, the aim of using Tailwind is to work within its predetermined styles (e.g., font sizes, widths and margins). This is specially useful when working with a team of developers and specially with a design system. Everyone knows that guy who can never set the pixel margins right.

1. "Ugly" HTML files

One of the biggest counterarguments against Tailwind is that it leaves HTML files messy, since styles (which also include pseudo-classes, media queries, transitions, and animations) are all inserted in a single line. For example, for a simple navigation button with a hover effect, we have:

<a
 className="text-md lg:text-lg font-serif hover:bg-yellow transition-colors font-bold px-2 py-1 lg:px-3 lg:pt-1.5 lg:pb-1 rounded"
 href="/about"
>
 About
</a>

In my experience, I've never reached a point where I've thought the "clutter" reached an unacceptable point, especially when using tools like the Prettier plugin that helps organize it. However, I can easily see how it can be reached in some projects.

2. Limits styling possibilities

One of Tailwind’s perks can also be its biggest drawbacks. Even though there are many ways to circumvent Tailwind’s limitations, sometimes they’re not enough. Some of the cases where I’ve found it lacking are:

1. Styling adjacent elements (the traditional + selector in CSS)
2. Styling parents based on child (the new-ish :has() CSS pseudo-class)
3. Adding/removing styles depending on the component's (React) state

Keep in mind that I’ve found solutions for all these issues, but at the time of writing, they’re not as elegant as I would have hoped.

1. When working with a new project

It allows you the flexibility of making Tailwind fit your project's needs and, most importantly, adapt your project into Tailwind's limitations.

2. When working with a team of developers

By working with a more limited scope of styles, it reduces the chances of styling errors and increases development speed.

3. When working with a design system

Especially one built with Tailwind’s styles in mind and, even better, using tools like Figma that have integrations with Tailwind, allowing developers to copy and paste the classes directly from the design into code.

1. When refactoring a bigger, pre-existing project

Speaking from experience, trying to fit a big pre-existing project into Tailwind’s mold is quite an ordeal. There will be multiple cases where it might not allow you to refactor components with the same (or even close) styles, interactions, and animations without using multiple workarounds.

2. When the project requires a high level of customization

For example, a project done by an agency where visual impact is more important than UX and UI. In these cases, Tailwind might turn into a limiter instead of a facilitator.