DEV Community

loading...

Discussion on: A simple strategy for structuring TailwindCSS classnames

Collapse
maxart2501 profile image
Massimo Artizzu

How come every time I read an article about Tailwind it's about trying to solve its problems? And most of the times the solutions are pretty much what plain CSS can do just fine?

I was wondering... Why is this good:

const listItemClassNames =
  'mb-3 sm:ml-3 sm:mb-0 even:bg-gray-50 odd:bg-white'
Enter fullscreen mode Exit fullscreen mode

while this is not?

.list-item {
  margin-bottom: $size-3;
  &:nth-child(odd) {
    background: $gray-50;
  }
  &:nth-child(even) {
    background: white;
  }
  @media (max-width: $small-size) {
    margin-left: $size-3;
    margin-bottom: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Just because it's more compact?

Collapse
wheelmaker24 profile image
Nikolaus Rademacher Author

The idea is to have a constrained system that only allows predefined values (the ones you have defined in the tailwind.config.js file). You are forced to design your components based on these "tokens". In a way you could achieve the same with SCSS / Sass mixins.

Another reason is that the compiled CSS file will stay small in size no matter how many components you have. With standard CSS approaches you would need to have specific style definitions for each component that will let the CSS output file grow in size.

Also when sticking to Tailwind you won't get in trouble with specificity issues (CSS overwrites and alike).

It's definitely a paradigm shift and can feel strange in the beginning. For me the constraints argument is the strongest, especially when using it in design systems.

Check out the official explanation of Tailwind's utility-first concept here:
tailwindcss.com/docs/utility-first

If you like, check out my other posts on Tailwind:

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.

Collapse
andreidascalu profile image
Andrei Dascalu

It is, mostly because your organizational solutions go well with React/Angular. Do that in any other kind of web app, templating system and so on and it quickly gets out of hand. You need to manage your lists of classes in code and break the whole point of having a presentation layer.
Scss still works better. If there's a cross-apptype solution, I'd rather stick with that since it's usable in more cases.

Thread Thread
wheelmaker24 profile image
Nikolaus Rademacher Author

Fair point – these tipps will only help if you are using a framework / library that uses JavaScript / JSX for the "presentation layer".