DEV Community

loading...

Discussion on: A simple strategy for structuring TailwindCSS classnames

Collapse
maxart2501 profile image
Massimo Artizzu

I've already read the official documentation of Tailwind. And several posts already, including yours. Every single point that had been made has been debunked.

The fact that the final CSS file is smaller has meaningless advantages. Styles are still a very small payload and computational overhead for the web. A single picture could weigh more than all the stylesheets in an application, and if you're using React or similar the impact of JavaScript on the CPU is orders of magnitude bigger.

Moreover, using SCSS mixins may lead to code repetition, but compression algorithms are very good at deflating repeated text.

Specificity is a powerful feature of CSS. I've never understood why one should give up understanding and using it. If one has troubles with it, they could either learn how to deal with it or... learn Tailwind?

And again, if you still have specificity problems in an era of encapsulated styles, is pretty clear you're using the wrong approach.

I think I'll stick to good old SCSS for the foreseeable future. And advise against Tailwind and similar utility-first patterns, that in my view solve nothing but the need to develop a good methodology.

That you still need with Tailwind anyway, just like your posts have proven once again.

Thread Thread
wheelmaker24 profile image
Nikolaus Rademacher Author

I see your points here and I was pretty much coming from the same side. I'm not afraid of CSS / specificity and alike and was always sceptical when it came to CSS-in-JS solutions as they in my view solved problems that I never had (like the scoping issue). The cascade is one of the main features in CSS and you can benefit from it a lot when using it correctly.

Also I would never say that you have to use Tailwind for every project, but when working in bigger projects with many engineers especially it is important to have constraints – and I have not found a better solution for that yet than Tailwind: It's easy to learn not only for engineers but for designers as well as it helps you to think in constrained tokens. If you have a better solution for this, I'd happy to hear it from you!

It's also fun to look behind the code of Tailwind – it has clever solutions for many problems. With that it is at least a great library to learn from and apply in your own CSS code afterwards. The way Tailwind takes advantage of CSS' core features like CSS variables / the cascade / specificity is nice to see.