@layer has made all this much easier using raw CSS. One creates sensible global defaults in a `@default {...}` layer, and then they overwrite in a `@custom {...}` layer.

Yep, the only even kinda maintainable CSS ends up being tailwind but in another file.

   <div class="unique-component-name">
      <input class="unique-component-name-input" />
      <p class="unique-component-name-text">Blah</p>
   </div>

   <div class="unique-component-name unique-component-name-variant1">
      ...

   .unique-component-name {
      ...

The cascading in HTML makes the thing that should be easy, creating variants with slight tweaks the most painful thing.

I actually agree with most of your comment. Just not that Tailwinds is the best way to actually do the styling. I don't have any issue having some form of compilation/processor step that takes colocated CSS and creates a final output, that isn't my objection to Tailwinds, in case that wasn't clear in my original comment. I prefer to actually use CSS, most often via style classes.

And I did not say to base styles on html structure - you are correct, that is brittle and actually one of the things I often ask about in FE interviews as a way of determining skill level. I said that good html structure makes CSS much easier, if your structure is bad, it can significantly compound the amount of CSS needed in order to achieve the desired outcome. So I believe there is a significant distinction in those two statements.