Instead of writing CSS files, you slap utility classes directly on your HTML elements. Want a blue background? bg-blue-500. Need padding? p-4. Responsive design? md:flex lg:grid. Your HTML ends up looking like alphabet soup, but it works.
<div class=\"bg-white rounded-lg shadow-md p-6 max-w-sm mx-auto\">
<h2 class=\"text-xl font-bold mb-2\">Card Title</h2>
<p class=\"text-gray-600\">Some content here</p>
</div>
This is either genius or complete insanity - ask 10 developers and you'll get 5 who love it, 5 who want to burn it with fire. No middle ground, no Switzerland.
Why This Approach Works, Usually
You stop fighting CSS: No more wondering why your styles aren't applying or dealing with cascade specificity bullshit. If text-red-500 doesn't work, you probably typo'd it.
Design consistency happens automatically: Tailwind's design tokens force you into a system. You can't just use random colors like #ff6b35 - you pick from their color palette. This prevents the usual chaos where every developer adds their own shade of blue.
Prototyping is stupid fast: Need to test a layout idea? Just throw classes at it directly in HTML. No switching between files, no naming things, no thinking about CSS architecture at 2am.
The v4.0 Rewrite Actually Fixed Things
They rebuilt the whole engine from scratch in Rust and the speed difference is insane - my 45-second builds now take 0.1 seconds. I used to have time to check Slack between saves, now I barely have time to blink. Watching the file size counter jump from 245kB to 12kB in real time is weirdly satisfying.
They finally added the CSS stuff we've been waiting for - cascade layers, container queries, better colors.
Real Companies Actually Use This Stuff
Yeah, it's not just toy projects. I've seen job postings mentioning Tailwind at big companies. Major companies like Heroku, Shopify, and Netflix use it in production - you can check out the full list of companies using Tailwind including their actual sites. The official showcase lists a bunch more, though half of them might be marketing bullshit.
What matters is that if you pick up a contract gig or switch jobs, someone on the team probably knows Tailwind. The community is big enough that you won't be the only weirdo writing bg-blue-500 hover:bg-blue-600.
The Downsides (Because Everything Has Them)
Your HTML will look like a cat walked across your keyboard: class=\"flex items-center justify-between py-2 px-4 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500\" is not readable.
First month you'll google 'tailwind center div' more than you check Instagram: I literally googled "tailwind vertical center" 47 times in one day and still got it wrong. The worst was when I spent 35 minutes debugging a layout that wasn't centering, turns out I typed itmes-center instead of items-center. My fingers are apparently dyslexic when I'm tired. Two days later? Same fucking typo.
Debugging becomes a nightmare: When something breaks, you're hunting through a wall of utility classes like trying to find Waldo in a Where's Waldo book that someone spilled coffee on. I once spent 3 hours debugging why my flex wasn't working before realizing I typed items-centre instead of items-center. Browser dev tools help, but good luck explaining this shit to a new team member who's looking at your HTML like it's written in ancient Sanskrit by a drunk monk.
Not great for complex components: Utility classes work fine for simple layouts. For complex interactive components, you'll end up writing CSS anyway. See this discussion on component patterns for alternatives.
