DEV Community

Cover image for Challenging the Skeptics: Unveiling the Undeniable Goodness of Tailwind CSS

Challenging the Skeptics: Unveiling the Undeniable Goodness of Tailwind CSS

Nick Taylor on February 06, 2024

People definitely have opinions about Tailwind. There are staunch supporters and staunch haters, but I really don't want to get into all that. Head...
Collapse
 
woldtwerk profile image
Willi

Most of the examples above should not be used in production, since they don't scale. Using arbitrary variants, children selectors etc. tend to be singletons in your compiled CSS file. Thus they will be unused on most pages in your app.
Sometimes style="padding:3px" is better than p-[3px], if your CSP is fine with it.

Collapse
 
nickytonline profile image
Nick Taylor

If you want to elaborate, I'm curious what doesn't scale exactly? Also, if you don't want to use Tailwind, it's all good. Use what works best for you and your team.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

I just added this bit to the accessibility section in case you already read the article, but I think something that would be interesting to add to the Tailwind a11y story is using Tatiana Mac's approach of taking a no-motion-first approach to animations.

Collapse
 
ryandotfurrer profile image
Ryan Furrer

As someone who waited (and somewhat hated on it) on learning Tailwind, I used it in my recent portfolio revamp and now I LOVE it. I don't think you need to use it all the time and vanilla CSS certainly has it's place, but people make it out to be this villain in the CSS space.

It's also quite intuitive once you get the hang of it.

Collapse
 
nickytonline profile image
Nick Taylor

Kylo Ren on Undercover Boss giving a thumbs up

Collapse
 
cmcnicholas profile image
Craig McNicholas

Tried again and again to like tailwind, it is just online CSS and I'll die on this hill.

I've worked on large (2m+ LoC frontends) and small sites, i always find plain CSS and following a good structure e.g. BEM is more readable and maintainable in the long run.

Collapse
 
nickytonline profile image
Nick Taylor

Thanks for giving it a read Craig!

Like I mentioned at the end of the blog post, "If you give it a go and say it's not for me, that's OK. Use what makes you the most productive."

Hot Rod saying Cool beans!

Collapse
 
ben profile image
Ben Halpern

Tailwind is good

Collapse
 
nickytonline profile image
Nick Taylor

Jack Nicholson nodding yes

Collapse
 
klimd1389 profile image
Dmytro Klimenko

Great overview! You've covered all the key aspects of this topic in detail and provided clear examples to support your points.

Collapse
 
nickytonline profile image
Nick Taylor

Thanks for reading Dmytro!

Actor Leonardo DiCaprio as Gatsby doing a cheers

Collapse
 
lymah profile image
Lymah

Great post ,@nickytonline.

Collapse
 
nickytonline profile image
Nick Taylor

Thanks @lymah!

Chow Yun-fat giving a thumbs up

Collapse
 
latobibor profile image
András Tóth

I very frequently cite this: every-layout.dev/rudiments/global-...

Utility first will mean you will have too many utility classes.
Tailwind will be gone in 3 years maybe. I still use many early CSS I have learned before 2010. I have used and forgotten many ORMs, yet my SQL chops are still needed.

Another criticism I would make is that many of these libraries work only well, if you already have deep understanding of CSS.

<p class="motion-safe:animate-spin">Spinning text</p>
Enter fullscreen mode Exit fullscreen mode

To know why you have to write motion-safe means you have to know about prefers-reduced-motion.

Both Bootstrap and Tailwind suffers from basically saying "flex" but in their own words: you need to know flex-grow before you can use grow, but then why don't you just write regular CSS flex-grow? Because it is 5 characters longer?

And finally: what happens when you have to restyle everything?

Anyone here remembers CSS Zen Garden? An HTML page with 221 different styles - with only CSS being different. You can't do a thing like this with utility classes.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

Thanks for giving it a read András!

Every Layout is great! I really enjoy Andy Bell's (@hankchizljaw) work along with Heydon's. Andy's Cube CSS is another great project.

I also was a fan of CSS Zen Garden and a more modern version of it in Stephanie Eckle's (@5t3ph) work, StyleStage.dev

I don't think CSS utility classes are going anywhere, and I still think it's important to know how CSS works like.

You might not like the syntax of some of the CSS classes, and that's OK. Like I mentioned at the end of the post, "If you give it a go and say it's not for me, that's OK. Use what makes you the most productive."

Collapse
 
latobibor profile image
András Tóth

Thanks for your correct answer, I'll check out Stephanie's work.

Collapse
 
ifrim profile image
Vlad Ifrim

I personally fail to see the goodness of tailwind from your article.
You're basically forcing yourself to learn a new syntax and writing it awkwardly in an attribute, repeating yourself, losing the semantics along the way.
While missing out on other goodness-es of css like layers, nesting and others.
But it's fine. I hope we can all live together in a world where some people love it and find it productive while others find it simply dumb. No offense intended.

Collapse
 
brense profile image
Rense Bakker

I mean that is really what it boils down to right? People who don't think its a big deal to invent a new language with bloated class name attributes in html code and people who do think that's a big deal. Tailwind is also notoriously bad at doing anything slightly more dynamic, or support slightly more advanced things from the css spec. There are things like cva that make tailwind slightly less of a headache, but why not just go for a styling framework that has those things built in, like PandaCSS, with none of the downsides of inventing a completely new language for styling that is not feature complete.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

If Panda CSS works great for you, awesome.

Like I mentioned at the end of the post, use what makes you most productive.

A panda djaying

Collapse
 
brense profile image
Rense Bakker

I specifically mention PandaCSS, because it works exactly like tailwind, but with none of the downsides of having to learn utility class names instead of actual css.

Collapse
 
szeredaiakos profile image
szeredaiakos

I've been using css since IE5. If someone sais he understands css he has very little idea how to css. Not saying I have perfect css skills, but quite the opposite. I am capable to write up 200 lines of the stuff and have it work on the first try. With normal programming languages one could build an entire 10k line app and have 0 problems on the first try.

So, yes. If you can't express at least 50 correct lines before you end up in an endless cycle of trial and error go for Tailwind but keep in mind, the time you invest in learning it will be wasted in 5 years... You'll have to learn the next css thing... Still worth it tho.

Collapse
 
nickytonline profile image
Nick Taylor • Edited

I still think it's important to understand CSS, but Tailwind is a tool. I don't think it will disappear in 5 years, but we shall see. I also don't think it's for only people that don't understand CSS.

There's SASS, CSS modules, BEM conventions, CUBE CSS, all kinds of tools and methodologies to write CSS

Use what works best for you.

Stephen Colbert saying Welcome to the Nerd Zone my friend

Collapse
 
szeredaiakos profile image
szeredaiakos

Whatever works is not that simple if you are building apps which are expected to las 10 years.

And yes, no tool will ever disappear, people who use it will.