Tailwind CSS Won the War... But We're the Losers - DEV Community

And said "that's disgusting. That's just inline styles with extra steps." They weren't entirely wrong. But something happened. Developers started using it. Then they couldn't stop using it. Then they forgot how to build without it. The data tells the story. According to the State of CSS survey, Tailwind's retention rate is in the high 70s. That means 3 out of 4 developers who try it keep using it. … ## The Problem Nobody Talks About But here's what's bothering me. And I think it should bother you too. **We're abstracting away fundamental knowledge** CSS isn't that hard. Flexbox, Grid, positioning, these are core web platform features. They're not going away. But we're building an entire generation of developers who don't know them. I've interviewed junior developers who can tell me exactly what `justify-content: space-between` does in Tailwind class form but can't write the actual CSS property. They know `flex items-center` but don't know `align-items: center`. They know `w-64` but have no idea that's `width: 16rem` or why rem exists. That's concerning. **The bundle size lie** Tailwind markets itself as producing tiny CSS bundles. "Most projects ship less than 10kb of CSS!" That's true. Your CSS file is small. But your HTML is massive. Every element has 5-15 classes. Your HTML files are 2-3x larger than they would be with semantic CSS. Sure, HTML compresses well. But it still needs to be parsed. The browser still needs to process all those classes. I ran the numbers on one of our projects. CSS went from 45kb to 8kb with Tailwind. Great! But HTML went from 120kb to 340kb. Net increase: 183kb. That's not mentioned in the marketing. **You're locked in** Want to switch from Tailwind to something else? Good luck. Your entire codebase is Tailwind classes. Every component. Every page. Thousands of utility classes everywhere. Migrating away from Tailwind is like migrating away from jQuery was. Possible, but so painful that most people just don't. You're not learning CSS. You're learning Tailwind. And if Tailwind goes away or falls out of favor, what do you have? **The readability problem** Look at this real code from a production app: … ## What You Can Do If you're using Tailwind (and you probably are), here's my advice: **Don't stop learning CSS.** Spend time with the actual properties. Understand what you're abstracting. Read CSS specs. Try new features. **Teach CSS to juniors before Tailwind.** Make sure they understand the foundation before adding the abstraction layer. … ## Top comments (32) ... The main problem for me is that to mimic CSS people are creating frameworks on top of Tailwind, like shadcn/ui. We know creating abstraction layer on abstraction layer is a recipe for failure. While the idea of utility classes is great, Tailwind took it to the extreme. When you take one thing to the extreme, and follow that mindset you are missing out options that make code simpler. There are not many languages that are only OOP or functional, most of them combine programing paradigms. … That was even more problematic in Tailwind 3, but here's the thing: a lot of projects are stuck with Tailwind 3 because switching to 4 is too much for a project that choose Tailwind *because* of "less maintainance". > Sure, HTML compresses well. ... Did the marketing mention that now you also have to install tailwind-merge, tailwind-aria, clsx, ... with their own runtime overhead? And the VS Code plugins you need to install to collapse all the `class` attributes when inspecting the markup and other stuff to make everything manageable? The same plugins that you *don't get* to install on the browser's devtools? … Yep. That’s why I honestly call it *cancer*. Once you use TW in a component library, you’ll **have to** drag it into the website that uses those components. And if it’s a legacy project - are you sure you won’t break anything with Tailwind’s built-in style reset and generic class names? I’ve personally seen cases where Tailwind broke existing logic because the site already had a global `.hidden` class doing `visibility: hidden`, and then Tailwind came in and wrecked the layout with `display: none`. … 1. A bunch of regular CSS with BEM 2. Tailwind appears and some components or page sections are written in it 3. Hacks start: `@apply` overriding original CSS or even writing regular CSS classes stuffed with `@apply` and Tailwind classes inside lol. 4. Hacks with custom values if your designer has his own vision: w-[142px], etc.