[ekzy]

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.

[NikxDa]

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.

[tipiirai]

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.

[willdr]

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.

[arzke]

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...

[willdr]

Did you continue reading?

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

[arzke]

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