_A honest discussion about the trade-offs nobody
Introduction
After 5 years of using Tailwind CSS in production, I’ve learned some har...
For further actions, you may consider blocking this person and/or reporting abuse
I think this misses one key point about Tailwind in modern component-based frameworks (React/Angular/etc).
The "loss of semantic meaning" only exists if you stop at utility classes. In a proper setup, semantics move up into components. We don’t need
<button class="primary-submit">— we build<PrimarySubmitButton />, and the Tailwind utilities live inside it.Prototype fast → extract to components → reuse.
If Tailwind is leaking all over pages, that’s not a Tailwind problem, it’s an architectural one.
And... you just created a leaky abstraction.
I see what you mean about leaky abstractions, but in this case the abstraction is intentional and controlled. encapsulates all the Tailwind classes, so the parent page doesn’t need to know anything about the styling details.
If the component is well-designed, any “leakage” is internal, not exposed—Tailwind stays an implementation detail. The leak you mention usually happens when utilities are scattered across pages, not when they’re wrapped in semantic components.
Using frameworks like MUI I've found them to be really leaky abstractions. "Oh, I want this to work slightly differently, oh, its code is encapsulated and I can't change how it works for this one thing I need."
I prefer to just add the class myself to the HTML. Old school, but now I have full control.
But, yes, if you control the component then it isn't as big of a deal. Granted, if you don't expose the internals and someone tries to update the anchor element with an attribute and then becomes confused as to why it isn't working... true story, not me but a coworker.
In my previous role we definitely had a mixed approach of tailwind and custom classes. We usually used tailwind classes for basic layout (grid, flex, responsive columns etc) and custom classes for everything else. I think also using a CSS preprocessor like Sass really helps to keep styles reusable and scoped cleanly which makes the system more scalable.
I also wonder how far Tailwind’s own features could help mitigate the copy/paste inconsistency problem. Extracting classes using
@applyin v3 or@layerin v4 could centralize common patterns like buttons/cards so you’re not repeating utilities everywhere. It feels like Tailwind can work at scale, but only if there’s intentional architecture on top of it.I'll take this a step further and boldly say that Tailwind is inherently bad. Even the use cases you list are vastly debatable.
Rapid prototyping
It works, but other alternatives don't force you to raise a complex build system just for make it compile. It also doesn't provide pre-made customizable components like Bootstrap gives you, so you have to provide your own -- that works well with Tailwind, of course.
Small teams with limited CSS knowledge
In no case Tailwind saves you to actually know CSS. It may give you the impression, but it fades once you start struggling with complex layouts and less-than-trivial values. And maybe with the inevitable cascade problems once someone discovers the square bracket syntax.
Projects with simple design systems
Then probably Tailwind is overkill. Because Tailwind aims to completely replace CSS files, so tends to be equivalent.
Marketing sites with minimal maintenance needs
If I had a medal every time someone said a project "needed minimal maintainance" only to discover that maintainance actually costed much more effort than anticipated, I'd be forced on my knees...
The only good thing I can find in Tailwind is its default design token, which is good - but, after all, not better than less pervasive alternatives.
You're right. But it's even worse than this.
I've been a professional software developer since 10 years before the first web browser. I've seen tech change over the years. The problem exists beyond Tailwind and CSS to frameworks and tools.
About 10-15 years ago, web development grew impatient with HTML and CSS and decided to code their own version with frameworks and CSS libraries. We lost our way. TailwindCSS is just one example. I've loved a LOT of frameworks in the last 15 years but after taking a look at NueJS, I now realize how derailed we've been. While we've been reinventing everything, often poorly, HTML, CSS and JS have been evolving.
Take a look at this short page for the short summary of what's wrong with web development in 2025. (You don't need to love the Nue solution to recognize the significant problems it is trying to solve.) I can't believe I didn't see these problems sooner. I felt them, but I didn't really clue in so clearly until now. To me, your article is another example of someone zooming out and seeing the problem(s), or at least recognizing the significant clues that are right there in front of us. Kudos for posting it and getting the discussion going.
Great observation! I had the same problem with one of my projects, I choose to use TailwindCSS and I couldn't change some of the issues regarding the usability of some forms. It was a nightmare. In the second version of the application I used HTML5 boiler template. My problems are gone now.
I worked a bit more at the beginning but the usability works smooth and I can maintain it easily.
5 years production Tailwind and hitting readability walls — this matches what I kept running into on a 2-year project. The thing I could never figure out: is the readability problem more about raw class count, or about losing the semantic mapping ("what IS this element?") when everything is utility strings? Built a tool to tackle the second part — extracts structured CSS with meaningful names from Tailwind HTML. Would that have helped in your case or was the pain different?
Great observation! I feel the same – Tailwind is amazing for prototyping, but not necessarily for large projects. And who loved it the most? Backend devs who occasionally had to do something on the frontend 😅
I think it is more of a frontend FOMO thing like SPA or micro frontends.
People see it used in one situation and then they want to use it everywhere.
I still don't understand why people are drawn to a utility classes only framework. Utility classes are not bad but this is the equivalent of using a, b and c to name your variables. You don't create context, it is easy to make mistakes, and you are copying things all over the code.
Bootstrap has flaws, but when CSS got better they incorporated the new features. I see that that less with Tailwind. It looks like they are more concerned with improving the utility classes.
With every tool people create you have to ask yourself, do I need this for my application.