[lancemurdock]

the syntax of styled-components plays so nicely with actual reusable components. A mesh of tailwind syntax with reusable components feels weird. But mostly, a div with 10 classes each doing one small thing is so unreadable

[reidjs]

In our codebase when it starts getting out of hand like that, we refactor using @apply https://tailwindcss.com/docs/extracting-components

[neurotrace]

If you're using `apply`, you might as well have just written the CSS normally, imo

[kaishiro]

I doubt the parent is talking about applying each of the tailwind util classes directly, but instead wrapping that combination of classes up into a reusable component to be applied around.

[neurotrace]

They're talking about the @apply directive. It takes a list of classes and creates a single class with those properties. Since Tailwind classes generally map almost 1-to-1 for CSS rules, it'd be easier in my opinion to just write the CSS directly.

[kaishiro]

I'm fully aware of what they're talking about. It's common usage in Tailwind to extract large collections of the utility classes back into reusable component classes which can be applied with a single @apply directive [1]. This being the case, this would not be a 1-to-1 mapping at all.

[1] https://tailwindcss.com/docs/extracting-components