I don't recommend Tailwind CSS

Tailwind CSS is simply a very celebrated CSS model among web developers. With nary anterior schematic creation knowledge, it solves the standardization of spacing, colors, and sizes for you. And connected apical of that, if you are moreover somewhat disorganized, it forces you into a moving methodology based connected building ample structures retired of elemental utilities (Utility-First Fundamentals). Add to each that a archiving that is easy to understand pinch a flawless search.

In the past I utilized it connected respective projects, it helped maine build personification interfaces quickly. And contempt each of that, it is simply a instrumentality I would not urge successful each context. I americium going to springiness you my constituent of view, my reasons, why you should deliberation doubly earlier utilizing Tailwind CSS connected mean aliases ample projects. The only point I inquire of you is an unfastened mind, self-criticism, and a willingness to learn.

You person to study dozens of classes

Tailwind has thousands of inferior classes. Even though the archiving is very bully and the editor autocomplete helps a lot, location is simply a ceiling of basal classes you person to internalize. Most likely, astatine first you will create pinch a browser tab unfastened and the hunt container moving nonstop. You walk clip knowing the astir due measurement to use each class. A slow process astatine the start. And if you person created your ain classes that operation pinch Tailwind's, the trouble grows.

It breaks the separation betwixt building and design

Tailwind CSS is simply a gigantic inferior library, atomic classes pinch circumstantial jobs. Unless you group classes pinch @apply, you extremity up including dozens of them successful your HTML. This breaks the classical norm of separating building from design, aliases HTML from CSS. It bloats the HTML, readability suffers, and you suffer reusability.

That said, this 1 is worthy pausing on, because it is the disapproval that gets rebutted the most. Adam Wathan, the creator of Tailwind, wrote the foundational matter of the defense, and his statement is simply a bully one. The separation of concerns does not disappear, it changes direction. With "semantic" CSS, your CSS depends connected the HTML; you tin restyle the HTML, but your CSS is not reusable. With utilities, your HTML depends connected the CSS; the CSS is reusable, but your HTML does not restyle itself. The coupling exists successful some cases, only the guidance of the arrow changes.

The statement holds successful a world of components, wherever React aliases Vue already put logic, markup, and style successful the aforesaid file. There, the separation by record type was already surgery by you beforehand. But successful a server-rendered project, pinch templates and classical CSS, the separation still makes complete sense. It is not a cosmopolitan law, it is simply a determination that depends connected your architecture.

Its names are not consistent

Its naming is not ever coherent, astatine times it is opaque and tends to confuse. Look astatine the alignment classes. What is the quality betwixt items-center, justify-center, text-center, and place-content-center? The sanction is not intuitive and does not travel a clear pattern. In lawsuit you are curious, items-center aligns items successful a flex container, justify-center aligns them connected the main axis, text-center centers text, and place-content-center centers contented successful a grid. Let maine rename them looking for coherence: flex-align-items-center, flex-justify-content-center, text-align-center, and grid-place-items-center. Do you announcement the difference?

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

The creation strategy is not enforced arsenic overmuch arsenic it seems

One of the large arguments successful favour of Tailwind is that its spacing and colour standard forces you to beryllium consistent. And that is true, but pinch a catch, the arbitrary values. You tin constitute w-[347px], text-[#1a2b3c], aliases p-[5.5rem] without thing informing you. They are an flight hatch that breaks the system. Nothing stops you from utilizing sky-400 and blue-400 successful the aforesaid project. Consistency still depends connected your discipline, not connected the framework. The strategy helps you, but it does not prevention you from yourself.

It is not a bully gateway to learning CSS

Tailwind is easy to usage if you already maestro styling. But for those pinch small CSS experience, it creates a mendacious consciousness of learning. It conveys that it is simply a minimalist measurement of penning CSS, taking distant the effort of keeping your codification tidy. Using truthful galore pre-built classes hinders a developer's expertise to genuinely maestro CSS. The clip you prevention naming classes you suffer learning to usage the model successful the astir businesslike way.

On the different hand, if you spell heavy into Tailwind, you drift distant from learning the fundamentals of the platform. pt-4 forces you to mentally construe to padding-top: 1rem. You summation fluency successful the abstraction, not successful CSS. To my students and coworkers I urge learning CSS earlier Tailwind. And if you are already an knowledgeable developer, you mightiness not moreover request the framework.

It is difficult to read

Let maine show you a fastener pinch an indigo background, achromatic text, semibold font, rounded corners, hover, and focus.

First successful vanilla CSS. I will return the liberty of utilizing variables for colors and spacing, and nesting for hover and focus, thing compatible coming pinch each browser.

:root { --color-white: #fff; --color-black: #000; --color-indigo: #4f46e5; --color-indigo-hover: #4338ca; --gap-s: 0.5rem; --gap-m: 1rem; } .button { padding: var(--gap-s) var(--gap-m); background-color: var(--color-indigo); color: var(--color-white); font-weight: 700; border-radius: var(--gap-s); &:hover, &:focus { background-color: var(--color-indigo-hover); } }

Now successful Tailwind CSS utilizing @apply.

.button { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700; }

Vanilla CSS is self-explanatory, whereas pinch Tailwind you person to cheque the documentation. What colour is bg-indigo-500? How information is rounded-lg? Is bg-indigo-700 darker than bg-indigo-500? The first snippet is easier to maintain, the learning curve for a caller developer is low, and the CSS tends to beryllium modular. You do put successful much effort pinch vanilla CSS, yes, but only astatine the start. Afterward you person afloat power of variables, cascade, and naming.

A funny detail. The illustration supra uses @apply, and Adam Wathan himself has admitted that @apply "basically only exists to instrumentality people" and that if he started Tailwind from scratch he would not see it. In different words, the way you usage to retrieve the readability of a normal people contradicts Tailwind's philosophy. And if you do not usage @apply, past you swallow the people crockery successful your HTML.

The HTML lies to you astir priority

You whitethorn person heard that Tailwind "ignores the cascade". That is an imprecise measurement to put it, because the existent problem is much subtle and interesting.

Being capable to power which selector wins based connected its position successful the stylesheet is basal to immoderate architecture. A emblematic correction among inexperienced web designers is to judge that the bid of the classes successful the HTML determines which 1 wins. It does not. Look astatine this code.

<p class="color-red color-green">I americium immoderate text</p>

What colour is it? You do not know. You request to spot the CSS cascade.

.color-green { color: green; } .color-red { color: red; }

Now yes, it is red, because .color-red is defined later. So far, normal CSS.

The problem pinch Tailwind is that you cannot resoluteness this ambiguity moreover by reordering your classes. Watch.

<p class="text-red-500 text-green-500">I americium immoderate text</p>

You mightiness deliberation greenish wins, since it comes past successful the attribute. Well, no, you get red. What wins is decided by the bid successful which Tailwind generates those classes successful the last stylesheet, not the bid successful which you constitute them successful the HTML. The markup lies to you. Reading the HTML you cannot cognize the result. And you do not hole it by changing the bid of the classes, because that bid is controlled by the compiler. You are near pinch !important aliases pinch avoiding conflicting utilities. This is what is called a leaky abstraction. It promises you simplicity and forces you to cognize really it useful underneath. Another classical case, class="mt-4 mt-0" does not do what its bid suggests.

Working pinch Dev Tools is not comfortable

When you build components pinch tons of classes, checking successful the inspector which styles use becomes slow. You person to scroll looking for what wins and what gets overridden. With vanilla CSS you quickly spot which styles are location and successful what order, and an correction is easier to locate. It is existent that editor extensions easiness this astatine penning time, but successful the browser, debugging successful production, the people crockery is still there.

Conclusion

What if you conscionable usage modern CSS?

Here is, for me, the genuinely caller debate. It is nary longer "utilities versus CSS by hand". It is "native modern CSS versus a inferior furniture connected top".

Look astatine what the level gives you today, without installing anything:

• Cascade layers (@layer) to bid privilege without fighting specificity.
• Native nesting, now without a preprocessor.
• Custom properties (CSS variables) for your tokens.
• :has(), the genitor selector we had been asking for complete 20 years.
• Container queries for per-component responsiveness.
• color-mix() to deduce colors.

And you cognize what the ironic portion is? That Tailwind is built correct connected apical of those aforesaid features. It uses autochthonal cascade layers, @property, instrumentality queries, and OKLCH colors. Which gives ammunition to the astir uncomfortable argument. If the level already brings each that, really overmuch of Tailwind is still essential?

The counterpart is clear. Native CSS gives you the features, but it does not springiness you the strategy of constraints, nor the style kept adjacent to the markup (colocation), nor autocomplete. On mini aliases server-rendered projects, modern CSS connected its ain is simply a awesome option. On a ample merchandise built pinch components and pinch galore group rubbing it, Tailwind still has arguments. There is nary cosmopolitan winner, location is simply a context.

But fto america put things successful perspective. It is not a bad tool. It is simply a instrumentality pinch a costs you salary successful the future, and 1 that nowadays besides competes pinch a autochthonal CSS acold much tin than a fewer years ago. Before choosing it, study CSS. Then determine pinch knowledge. The first effort you prevention today, you whitethorn salary backmost pinch liking tomorrow. Or possibly not. Now, astatine least, you person some sides to determine for yourself.

Sources

• CSS Utility Classes and "Separation of Concerns", Adam Wathan (the foundational matter of the defense: the guidance of the dependency).
• Open-sourcing our advancement connected Tailwind CSS v4.0, charismatic Tailwind blog (new engine, CSS-first config pinch @theme, and the capacity figures).
• Why I Don't Like Tailwind CSS, Aleksandr Hovhannisyan.
• Disadvantages of Tailwind CSS, Script Raccoon.