I find it just inevitably leads to massive classes that pollute markup. Makes it a lot harder to parse HTML and figure out the structure. There are ways to make it a bit better but it's still not great (for me).
It's even worse with conditional styling since you're not toggling a single class on an off but dozens.
You can't use string interpolation for classes, e.g. `<div class={`bg-${color}-400`}>` (Tailwind won't include the classes in your CSS because it doesn't recognize you want all or a subset of bg-<color>-400 classes. They recommend using maps but this becomes very verbose once there are more than a few options.
I'm using Svelte which has a great built-in styling solution with component-scoped styles by default, and modern CSS with nesting is a lot more compact than it used to be.
It's even worse with conditional styling since you're not toggling a single class on an off but dozens.
You can't use string interpolation for classes, e.g. `<div class={`bg-${color}-400`}>` (Tailwind won't include the classes in your CSS because it doesn't recognize you want all or a subset of bg-<color>-400 classes. They recommend using maps but this becomes very verbose once there are more than a few options.
``` const colorMap = { 'red' : 'bg-red-400', 'blue': 'bg-blue-400' } <div class={colorMap[color]}></div> ```
I'm using Svelte which has a great built-in styling solution with component-scoped styles by default, and modern CSS with nesting is a lot more compact than it used to be.