DEV Community

Cover image for Tailwind CSS v4: Quick Guide 🚀

Tailwind CSS v4: Quick Guide 🚀

Utkarsh Web on February 03, 2025

Why Tailwind v4.0 is a Game-Changer 🔥 Hey devs! Tailwind CSS v4.0 is not just an update. It reshapes the way we write CSS. Forget about ...
Collapse
 
maxart2501 profile image
Info Comment hidden by post author - thread only accessible via permalink
Massimo Artizzu

how modern web development should be: fast,

Because adding 30 more packages and 1s build time is faster than using CSS straight away.

intuitive,

Because classes like [&>.has-[:checked]]:h-3.5 are so crystal clear.

and powerful.

... except for those things you just can't do with Tailwind, that is.

Collapse
 
utkarshthedev profile image
Utkarsh Web

Ah yes, because writing raw CSS with infinite .div > .div > .div ** nesting is so much **faster than using utility classes. Nothing speeds up development like scrolling through a 5,000-line stylesheet just to find why that one button won’t center.

And sure, [&>.has-[:checked]]:h-3.5] **looks complex—until you realize it **saves you from writing five extra lines of CSS, a !important war, and a therapy session over specificity issues.

As for ‘things you just can’t do with Tailwind’—I mean, you could still write custom CSS, but I get it, that's a radical concept for someone who thinks Tailwind is adding 30 extra packages when it’s literally just a PostCSS plugin.

But hey, if you love reinventing the wheel with inline styles and wondering why your CSS file is bigger than your entire app, more power to you!

Collapse
 
maxart2501 profile image
Massimo Artizzu • Edited

Ah yes, because writing raw CSS with infinite .div > .div > .div ** nesting is so much **faster than using utility classes. Nothing speeds up development like scrolling through a 5,000-line stylesheet just to find why that one button won’t center.

Ask yourself why you're dealing with a 5kLOC stylesheet.

If you're dealing with a legacy project, then sure, throw Tailwind at it. It's already a disaster anyway.

But if you ended up creating such mess... Well, that's entirely on you and your inability to organize your styles. If you think Tailwind will solve this, you're only deluding yourself: your style declarations will alway be a mess.

My stylesheets rarely go over 100 LOCs. Most are around 50-60 lines. The cascade is never a problem. Thus I don't care much about the specificity of my selectors, but it's usually 0.0.1 - not even 0.1.0. When it goes over, it's because of attributes and pseudo-classes. I very rarely use classes, and so I rarely get to name anything. Because if I have trouble with naming things, then it's a sign I have no idea of what I'm doing. And it's just something that doesn't happen to me, period.

Ask me how.

And if you're wondering, yes, I worked on large projects. And I created UI libraries used by hundreds of developers. I just happen to have method.

And sure, [&>.has-[:checked]]:h-3.5] **looks complex—until you realize it **saves you from writing five extra lines of CSS

Oh yes, those five extra lines of well-readable style declarations will be the death of me... It's not like the IDE and AI tools will help me in 2025, no...

Some wise man once said:

"Programs are meant to be read by humans and only incidentally for computers to execute."

(No, it's not Donald Knuth.) Point is: if I wanted to write my styles like that, I'd write all my code in Brainfuck. Tailwind has created a whole arbitrary language to style that's essentially write-only just like a regular expression: you can debug and fix a regular expression, but it's much harder than doing it with regular JavaScript.

Don't get me wrong: I love regular expressions. But I still loathe Tailwind. Because regular expressions don't bloat with code and I use them for very specific purposes.

a !important war

It's funny because the last !important war I had to fight was because of Tailwind! Because yes, Tailwind also breaks the "golden rule" of utility classes to all have specificty 0.1.0. I had to use !my-4 to cut the crap short.

At least Bootstrap is true to that principle.

Oh yeah, I could've used @layer... if only Tailwind didn't break the ability to use it! Meaning that not only Tailwind has caused me a specificity issue, but it also prevented everyone to effectively fix it!

it’s literally just a PostCSS plugin.

And that's the worst delusion of all.

Tell me if tailwind-merge is a PostCSS plugin. If clsx is. If the IDE plugins you're using for handling the mess in your code are for PostCSS. Sure, you can do without them... if you want to make a hell of your life.

I usually don't use PostCSS, period. If I want to get fancy, good old SASS gives me all that I need.

But hey, if you love reinventing the wheel with inline styles and wondering why your CSS file is bigger than your entire app, more power to you!

And less to you, apparently, if you think the alternative is... inline styles?!

Now bring me a project where the stylesheet is bigger than the whole app. Come on, I challenge you.

Oh wait, I actually have some: it's those projects that came to production with the entirety of Tailwind because they didn't set up the build step correctly. Ironic, isn't it? But it's something that has happened.

And PSA: performance-wise, stylesheet are never the problem. Parsing is way faster than JavaScript. Compression is better than HTML and JavaScript. And browsers cache them aggressively.

On the converse, Tailwind taints my markup to the point where what I save on .css files, I spend twice on the .html, that cannot be as easily cached. Great saves, huh?

But hey, if you want to believe that Tailwind still makes a shred of sense... more power to you.

Thread Thread
 
utkarshthedev profile image
Utkarsh Web

Alright, listen up—if you're still clinging to a 5kLOC stylesheet like it's some badge of honor, maybe it's time to clean up your act instead of blaming Tailwind. Let's break it down with a few facts:

** Organization Over Quantity:**
A 5kLOC stylesheet isn’t Tailwind’s doing—it’s a monument to disorganized coding. Tailwind is designed to keep your custom CSS lean (often around 50–100 lines). If your styles scream 'spaghetti mess,' maybe the problem is less about the framework and more about your approach.

** Specificity Simplified:**
Sure, some of Tailwind's utility classes might look odd at first glance, but they're crafted to save you from writing repetitive, hard-to-maintain CSS. If you're getting into endless specificity battles, it’s not Tailwind's fault—it’s a sign that your current methods are out of date. Tailwind helps keep things predictable, not a playground for your naming nightmares.

** HTML Bloat vs. CSS Efficiency:**
Worried about bloated HTML? Modern build tools like PurgeCSS and Tailwind’s JIT mode cut out unused classes like a pro. While you might moan about HTML size, browsers parse CSS lightning fast and cache it aggressively. So unless your project’s performance is suffering, your gripe might be more about personal taste than actual issues.

** Utility-First Benefits:**

Tailwind isn’t just 'a PostCSS plugin'—it's a full utility-first framework that pushes for consistency and rapid development. If you're still stuck in the era of manually writing endless lines of CSS, perhaps you should consider that the world of web development has moved on. Tailwind's pros—speed, maintainability, and a scalable design system—often outweigh its cons, especially when you set it up correctly.
Enter fullscreen mode Exit fullscreen mode

Tailwind forces you to adopt better practices. If your codebase looks like a mess, it's more likely your own doing rather than a failing of the framework. Instead of railing against Tailwind, maybe take a look at your coding habits and see what really needs fixing. Time to evolve, my friend.

Thread Thread
 
maxart2501 profile image
Massimo Artizzu

Oh wow. Now you resorted to ChatGPT answers, since you just don't have arguments?

Because I can't explain how unhinged this is from what I actually said.

Bye bye.

Thread Thread
 
utkarshthedev profile image
Utkarsh Web

Bro, you're just trying to twist the narrative here. The reality is simple—Tailwind is better than writing plain CSS in a stylesheet, and if it wasn’t, it wouldn’t be widely adopted by so many developers and major projects. It exists because it solves real problems. If you’re struggling with it, maybe the issue isn’t Tailwind but how you’re approaching it. Try building the same project with Tailwind and then with traditional CSS—you’ll see the difference firsthand. Sometimes, it's just about shifting your perspective instead of resisting progress.

Some comments have been hidden by the post's author - find out more