Comment by uhoh-itsmaciek

The problem is having to look in a different file for styling a component, and having to come up with a name for (at least one) CSS class per component. In traditional CSS, classes are intended to be reusable. You write a class definition once, and then use it in a bunch of different elements.

When working with a component-based UI (like in React), the components are typically the unit of reuse. Those CSS classes are used in one place: the component they're defined for. It's annoying to have to come up with a name for them, and to have to work in a separate file, especially if I just want `padding-inline: 4px` or `display: flex`.

Some argue separation of concerns, but CSS is inherently tightly coupled to the structure of your HTML: there's no getting around that. `.foo > ul` breaks if you replace that `ul` child with an `ol`.

I do agree that more intricate styling is harder to read with Tailwind, and I have some other gripes, too, but in general it's a good trade-off for component-based UIs.