The first time I saw Tailwind CSS, I hated it.
I looked at the HTML, saw a class string that looked like class="flex flex-col justify-center items-center bg-blue-500 p-4 rounded-lg shadow-md hover:bg-blue-600 transition-all", and I felt physically ill.
"This is just inline styles with extra steps!" I shouted. "What happened to Separation of Concerns?"
I was a "Real" CSS developer. I wrote semantic HTML. I used BEM naming conventions (.card__header--active). I was proud of my clean markup.
Then I actually built a large-scale app with Tailwind. And I realized I was wrong. Here is why the "Ugly HTML" is a small price to pay for the massive boost in velocity.
1. The "Separation of Concerns" Myth
In the jQuery era, separating HTML (structure) from CSS (style) made sense.
But in 2026, we build Components (React, Vue, Svelte).
If you have a component, the HTML and the CSS are tightly coupled. They are the same concern. Moving the styles to a separate .css file doesn't separate concerns; it just separates files. It forces you to context-switch constantly.
2. The "Naming Things" Fatigue
The hardest thing in Computer Science is naming things.
With traditional CSS, you spend 20% of your time inventing names for wrapper divs.
.sidebar-inner-wrapper
.sidebar-content-container
.sidebar-left-column
With Tailwind, you stop naming. You just style. You focus on the what, not the name.
3. It’s Not "Inline Styles"
Critics say Tailwind is just
This is false.
Inline styles allow you to do anything. You can set margin: 13px. You can pick any hex code.
Tailwind is a Constrained Design System.
You can only use m-4 (which maps to your specific spacing scale). You can only use bg-primary (which maps to your theme).
It forces consistency across a team of 10 developers in a way that raw CSS never could.
4. The Maintenance Dream
Have you ever tried to delete a CSS class from a 3-year-old project? You don't. Because you're scared it might break a button on a page you forgot about. So the CSS file just grows forever (Append-Only CSS).
With Tailwind, the styles are on the element. If you delete the element, the styles are gone. The technical debt never accumulates.
Conclusion
Yes, the HTML looks messy. I admit it.
But I don't code for "pretty source code." I code to ship products. And once you get over the initial shock, Tailwind makes you ship faster than you ever thought possible.
Hi, I'm Frank Oge. I build high-performance software and write about the tech that powers it. If you enjoyed this, check out more of my work at frankoge.com
Top comments (0)