Tailwind Is the Worst Form of CSS — Except for All the Others

Tailwind CSS is controversial. Loved for its speed, hated for its mess. Why does a method that seems wrong… actually work? Let’s explore the Tailwind paradox.

1. Why Tailwind Feels Wrong

It's cluttered with utility classes, kills semantic clarity, and demands memorization. Many see it as regression.

Common complaints:

• Bloated markup: class="px-4 py-2 text-gray-800 rounded-md"
• No semantics: farewell .btn-primary, hello inline styles
• Cognitive load: it’s a new CSS dialect
• No separation of concerns

2. Why Tailwind Actually Works

Despite its flaws, Tailwind speeds up development, ensures consistency, and keeps your CSS lean. It shines in fast-moving, scalable projects.

Clear benefits:

• Speed: styling directly in markup
• Implicit design system through config
• Responsive made easy via md:, xl: etc.
• Clean CSS bundle via JIT and PurgeCSS
• Highly customizable via tailwind.config.js

3. Where Tailwind Shines

Tailwind is not beautiful — but it is practical. In startups, modern apps and component-based frameworks, it thrives.

Ideal scenarios:

• Rapid prototyping
• Component-based design systems
• Apps built with Next.js / Nuxt

4. The Alternatives? Messier than Expected

No method is perfect. Bootstrap is opinionated, SCSS/BEM is elegant but slow, and vanilla CSS demands discipline.

Quick comparison:

• Bootstrap: fast but hard to customize
• SCSS/BEM: structured but verbose
• Tailwind: chaotic in markup, pragmatic in practice

5. Conclusion

Tailwind is “the worst form of CSS — except for all the others.” It’s not elegant, but it’s efficient. And in today’s frontend world, that’s what matters.