DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Discussion on: Tailwind CSS: My experience in 2022

 
erickpetru profile image
Erick Eduardo Petrucelli

Nope, it isn't an antipattern.

Yes, it's.

From Tailwind documentation on Avoiding premature abstraction:

Whatever you do, don’t use @apply just to make things look β€œcleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

  • You have to think up class names all the time β€” nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.
  • You have to jump between multiple files to make changes β€” which is a way bigger workflow killer than you’d think before co-locating everything together.
  • Changing styles is scarier β€” CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site?
  • Your CSS bundle will be bigger β€” oof.

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls β€” and even then only if you’re not using a framework like React where a component would be a better choice.

And if you allow me to put my personal opinion on top of that, everyone that feels @apply is unavoidable with Tailwind are just either:

  • Too closed to the semantic classes mindset (probably because of things like Bootstrap). Not blaming you, I was this way as well.
  • Not using components based development (with Vue, React, Svelte, Web Components, whatever). And by "using components" I mean really understanding how to properly split down a complex UI into small abstract and reusable pieces. Like others said, Atomic Design way can help a lot.
Thread Thread
 
yoquiale profile image
Alex

I do component-based development in vue and split stuff by functionality and reusability. I use \@apply in each component's tag.</p>

Thread Thread
 
natescode profile image
Nathan Hedglin

Why? I don't see the benefit of Tailwind if one is using compiler directives to write CSS classes. The point of Tailwind is to not write CSS classes that have to be named, can't semantically be reused and grow with each component. There is no benefit other than limiting CSS property values which can be done with custom props. @apply is just a weak mixin that can't take parameters.

If you just want to restrict property values, I highly recommend using a custom props library like open props. If you're defining styles per component anyways then couple open props with styled components and you're set.

Hope that helps. So many interesting CSS approaches these days.