Why I don't recommend Tailwind CSS | Andros Fenollosa

Skip to content

Tailwind CSS is a very popular CSS framework among web developers. With no prior graphic design knowledge, it solves the standardization of spacing, colors, and sizes for you. And on top of that, if you are even slightly disorganized, it forces you into a working methodology based on building large structures out of simple utilities (Utility-First Fundamentals). Add to all that a documentation that is easy to understand with a flawless search.

In the past I used it on several projects, it helped me build user interfaces quickly. And despite all of that, it is a tool I would not recommend in every context. I am going to give you my point of view, my reasons, why you should think twice before using Tailwind CSS on medium or large projects. The only thing I ask of you is an open mind, self-criticism, and a willingness to learn.

You have to learn dozens of classes

Tailwind has thousands of utility classes. Even though the documentation is very good and the editor autocomplete helps a lot, there is a ceiling of basic classes you have to internalize. Most likely, at first you will develop with a browser tab open and the search box working nonstop. You spend time understanding the most appropriate way to apply each class. A slow process at the start. And if you have created your own classes that mix with Tailwind's, the difficulty grows.

It breaks the separation between structure and design

Tailwind CSS is a gigantic utility library, atomic classes with specific jobs. Unless you group classes with @apply, you end up including dozens of them in your HTML. This breaks the classic rule of separating structure from design, or HTML from CSS. It bloats the HTML, readability suffers, and you lose reusability.

That said, this one is worth pausing on, because it is the criticism that gets rebutted the most. Adam Wathan, the creator of Tailwind, wrote the foundational text of the defense, and his argument is a good one. The separation of concerns does not disappear, it changes direction. With "semantic" CSS, your CSS depends on the HTML; you can restyle the HTML, but your CSS is not reusable. With utilities, your HTML depends on the CSS; the CSS is reusable, but your HTML does not restyle itself. The coupling exists in both cases, only the direction of the arrow changes.

The argument holds in a world of components, where React or Vue already put logic, markup, and style in the same file. There, the separation by file type was already broken by you beforehand. But in a server-rendered project, with templates and classic CSS, the separation still makes complete sense. It is not a universal law, it is a decision that depends on your architecture.

Its names are not consistent

Its naming is not always coherent, at times it is opaque and tends to confuse. Look at the alignment classes. What is the difference between items-center, justify-center, text-center, and place-content-center? The name is not intuitive and does not follow a clear pattern. In case you are curious, items-center aligns items in a flex container, justify-center aligns them on the main axis, text-center centers text, and place-content-center centers content in a grid. Let me rename them looking for coherence: flex-align-items-center, flex-justify-content-center, text-align-center, and grid-place-items-center. Do you notice the difference?

There are more examples: justify-center but items-center (not align-center); border gives 1px but border-2 gives 2px. Small frictions that add up.

The design system is not enforced as much as it seems

One of the big arguments in favor of Tailwind is that its spacing and color scale forces you to be consistent. And that is true, but with a catch, the arbitrary values. You can write w-[347px], text-[#1a2b3c], or p-[5.5rem] without anything warning you. They are an escape hatch that breaks the system. Nothing stops you from using sky-400 and blue-400 in the same project. Consistency still depends on your discipline, not on the framework. The system helps you, but it does not save you from yourself.

It is not a good gateway to learning CSS

Tailwind is easy to use if you already master styling. But for those with little CSS experience, it creates a false sense of learning. It conveys that it is a minimalist way of writing CSS, taking away the effort of keeping your code tidy. Using so many pre-built classes hinders a developer's ability to truly master CSS. The time you save naming classes you lose learning to use the framework in the most efficient way.

On the other hand, if you go deep into Tailwind, you drift away from learning the fundamentals of the platform. pt-4 forces you to mentally translate to padding-top: 1rem. You gain fluency in the abstraction, not in CSS. To my students and coworkers I recommend learning CSS before Tailwind. And if you are already an experienced developer, you might not even need the framework.

It is hard to...