How is a class with a single rule, that does exactly what it's supposed to, not "semantic?" What do you think "semantic" means, in this context?
Maybe you mean classes organized with a high level of abstraction that have multiple rules and are meant to be related to the document structure in a specific way?
Nothing stops you from layering BEM on top of tailwind via @apply - although I'm not sure if that's a good idea. Maybe if creating a full, custom, design-system using tailwind?
Although the Tailwind author hates @apply and says they shouldn't have put it in the tailwind in the first place (mainly because it's a hard feature to develop - i wouldn't be surprised it would be removed). I think going tailwind only is bad too because you loose many of the nice functions of CSS like theming/cascade.
So i think using utility classes/tailwind for base/layout and still using named classes where it makes sense (like common reusable components, hover hiearchies, transitions/animations) is most practical approach. And using BEM as convention for the named classes is not a bad idea - certainly better than no system.
> Although the Tailwind author hates @apply and says they shouldn't have put it in the tailwind in the first place (mainly because it's a hard feature to develop - i wouldn't be surprised it would be removed). I think going tailwind only is bad too because you loose many of the nice functions of CSS like theming/cascade.
I'd say that dropping the cascade, along with namespacing "classes" (through the build-step) is the main feature of tailwind. It's a departure from CSS - I don't think I'd recommend to mix and match.
I like CSS, but I also see how it's a complex tool that's often used poorly, even by experienced developers.
As for themeing - I'd say that is well supported within tailwind.
I would say that'd be a Tailwind anti-pattern, since Tailwind exceeds by trying to do away with cascading, and BEM is an attempt to componentize CSS but retain some cascading.
Also, if you handed me a project with that approach, I would run for the hills! How would you decide when to use BEM styling and when to use the tailwind classes? It'd be a nightmare.
Use tailwind as much as possible until you feel like you need a class then use BEM for the naming/organisation. It's actually pretty practical system - with headwind the non TW classes sort to the front so you can immediately see if there is something more in css.
The resulting css you end up with is usually super light only with special things, edge cases, hover groups and stuff TW just doesn't handle.
If you ever use @apply,you need to come up with a name. I prefer a few @aplly classes to meaningless clutter of tailwind detailed styles.
You could of course have a policy to never refractor - but then you might need to enforce alphabetical use of tw classes to more easily keep styles in sync accross your codebase?