Hacker News Reader

Comment by ekzy | Hacker News Reader

In my experience, it isn't black or white. I've used tailwind along with components, e.g.

.button-primary { @apply rounded-full focus:ring focus:ring-orange-500 ring-offset-4 outline-none px-6 py-3 etc...

and it gives you the best of both worlds. You refactor common css code into components and still have the amazing flexibility of utility classes.

View on HN

Arguably, this is the worst of both worlds. In a React world, you'd have a <Button variant="primary"> component for this.

By using @apply excessively, now you have to deal with class names and the resulting messy conflicts, and yet you still can't/don't write plain CSS and harness its full power.

@apply is one of Tailwind's worst features, imo.

Certainly not black and white. The article merely states that you need less HTML/CSS code to do the same thing and the resulting site is leaner and faster.

This is not the best of both worlds. This is an antipattern and discouraged by the Tailwind core team and the Tailwind community at large.

Actually, the docs says it's perfectly fine to use @apply for highly reusable components like buttons and form controls: https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...

Did you continue reading?

> even then only if you’re not using a framework like React where a component would be a better choice.

Yes I did. You seem to assume everyone is using a "framework like React". I am not.

Reply on news.ycombinator.com