FWIW you wouldn’t need to add the `transition-link` class to every A tag, you could just do `.link-list > a`.

True for this isolated example, but careful with this practice because that requires `<a />` to be the immediate descendant of `.link-list`, where className is more flexible.

Consider a simple HTML change like wrapping links in a list item, or occasionally using a <button /> to handle click events, it would break the styles if you used child selectors:

  <ul class="link-list>
    <li><a href="#" /></li>
  </ul>

^ even with this tiny change, your styles are gone. Would have to change it to:

  .link-list > li > a {}

And would have to repeat that for anything else you'd want to support later:

  .link-list > li > a,
  .link-list > li > button {}

etc. Where with a normal className it would just work in all those cases without having to touch CSS again:

  <div class="link-list>
    <a class="transition-link" href="#" />
    <span><a class="transition-link" href="#" /></span>
    <button class="transition-link" />
    <ul class="flyout-menu">
      <li>
        <ul class="sub-menu">
          <li><a class="transition-link" href="#" /></li>
        </ul>
      </li>
    </ul>
  </div>

All those would be styled correctly without having to explicitly list descendant structures in CSS. So it's more flexible just using className and I would only use > for specific situations.

Don't do that. You will regret it.

Why?

Yeah, I was being deliberately obtuse.

But to be honest, just a few these lists result in sending way more markup than I would be regular old CSS. And we haven't even applied any responsive classes.

Ultimately I think this is a subjective aesthetic judgement... the kind of UI code the tailwind results is ugly and hard to read (for me), and I much prefer using CSS modules.

I thought Tailwind handling pseudo classes and responsive breakpoints in the className was pretty slick, but I also agree with you that they can get very long.

Part of it is just organization/abstraction. Personally, when a component gets too ugly to look at it's time to abstract that away. I want all my top level components to be simple almost English looking syntax and attributes, or even no attributes, like this:

  import { Header, Page, Footer } from 'library';

  const App = () => <>
    <Header />
    <Page />
    <Footer />
  <>;
   

Ideally I'm looking at clean components like this in my daily work, with those long classNames hidden away in a component library: https://github.com/bennyschmidt/ragdoll-studio/blob/master/r...

I think even with regular CSS, styled components, etc. you're still going to have that base layer where all the complexity is hidden.

To your point, it is purely subjective. ^ this example marketing site uses Tailwind but the product itself is native CSS: https://github.com/bennyschmidt/ragdoll-studio/tree/master/r...

I think a directory structure like:

  Header
    index.js
    styles.css
  
  Footer
     index.js
     styles.css

Is also totally fine. The markup in the components is a lot cleaner and often just uses a single selector instead of long Tailwind-esque classNames. With Tailwind I will end up with many more but smaller components - because those classNames are establishing the design system as we go - where with modules (React components using unnamed CSS imports like `import './styles.css';) you can import just the CSS files you need like a base.css, theme.css etc. then your component is very clean - just uses normal selectors and CSS is fully separated out from markup.