Head of Engineering at Friday Finance, Vue.js Community Partner, Senior UI/UX Consultant, Master in Production Engineering, MBA in IT Management, Technologist in Data Processing, MCP and MCPD.
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.
Yes, it's.
From Tailwind documentation on Avoiding premature abstraction:
And if you allow me to put my personal opinion on top of that, everyone that feels
@applyis unavoidable with Tailwind are just either:I do component-based development in vue and split stuff by functionality and reusability. I use \@apply in each component's tag.</p>