Hacker News Reader

Comment by nextaccountic | Hacker News Reader

It makes no sense for me that @apply is frowned upon. It's what makes Tailwind actually kinda usable for me. Without it, markup looks like line noise full of boilerplate that's hard to modify in a systematic way.

I think what Tailwind actually needs is more abstractions, not to discourage the use of the sole abstraction @apply

View on HN

Using @apply defeats the entire purpose of Tailwind. The point of it is to localize styling alongside the markup. If you're using @apply then you're constantly context switching from your markup to your CSS files while working.

There's plenty of ways to manage the bevy of classes you need. First step is making use of components to deduplicate stuff. Then in those components, use a library like class-variance-authority aka "cva()" which allows you to set up complex named presets for your components (like size="small" or color="primary" and things like that).

I use @apply in quite a few projects, mainly because I like the defaults in tailwindcss. I know it defeats the point of tailwind, but I find that it works nicely when using BEM.

I genuinely don't understand, why would you use `@apply text-center` instead of `text-align: center`?

Like if you're already at the point of setting up stylesheets & classes with a pre-processor why would you do that and not say use scss with some mixins for the more complex reused parts? At that point any IDE plugin that knows CSS can give you completion and your compiled sources will look a lot like the written ones in the dev tools.

Personally I wouldn't use `@apply text-center` over just `text-aligh: center;`, but I do use `@apply text-red-300` or `@apply px-2`, simply because I like the set of defaults Tailwind comes with.

I tried building my own set of defaults, but eventually decided that just using the Tailwind ones is much easier.

Reply on news.ycombinator.com