Hacker News Reader

Comment by francislavoie | Hacker News Reader

Saying "unless you use @apply" invalidates this article for me. Everyone knows that @apply only exists as an escape hatch, it is not supposed to be used, except for when it's necessary like for compatibility with libraries that declare their own classes that you need to override.

The most commonly repeated point in the article is "escape hatches bad" and I think that's completely absurd. Of course you want escape hatches, otherwise when you do hit an edgecase you get stuck with no solution. That's exactly what would force you to throw away that approach and pivot. Tailwind doesn't have that problem because it was designed to include escape hatches.

Users deciding to use those escape hatches instead of sticking to a design, isn't Tailwind's fault.

View on HN

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

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