Using BEM and @apply instead utility classes

[chimok]

In my company we had a discussion about coding standard. Almost all developers love tailwind but the majority don't like this huge collection of utility classes.

So they prefer using BEM classes and write code with @apply.

Example:

.button--primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white text-center font-bold py-2 px-4 rounded;
}

I've found this idea horrible because:

• It makes css code very hard to read
• Now we have still utility classes and the non-standard apply syntax + BEM
• Its often not really more work to stick with CSS/SCSS
• strip out unused css with tailwind isn't given anymore (correct me if i am wrong)
• I think its totally against the idea of tailwind

For that reason I believe either go with the utility classes approach or simply stay on classic BEM/CSS. I would like to know how more experienced tailwind developer think about it. Is there anything I'm missing?

[wongjn]

No, I don't think you are missing anything – you seem to have a good grasp on the concepts. Consider reading the documentation page about extracting components if you have not done so already. This addresses the concepts of BEM and others and reinforces your points.

Here are some X/Twitter threads by Adam Wathan (creator of Tailwind) that supports your points:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097