[JxLS-cpgbe0]

but my Cards are design components, they don't have semantic classes. How is ctrl+f "border-b border-gray-200 py-6 flex items-center justify-between mb-16 sm:mb-20 -mx-4 px-4 sm:mx-0 sm:px-0" better than changing .myCard__title{}?

[_jjkk]

I guess it depends on the project, but I can't recall one time I've had to do a CTRL F like you've mentioned.

Of course if you have a very simple page with just some cards, a couple page layouts, that is one thing. Probably can get by with just a myCard class that works everywhere on the site.

But in most projects, as the number of custom components grows, nobody wants to go back and touch (break?) old CSS, so they end up just writing a bunch of fresh stuff for this new feature and throwing it on the pile.

This problem happens often, while the refactor-in-one-place case happens very little.

[JxLS-cpgbe0]

I was going to say the opposite. Search-and-replace would never work on a high-volume site with a lot of components. Replace ".font-bold" and you just affected anything that was bold across the entire site.

I could see a use for this in JSX though.

[joshmanders]

Then you extract components. https://tailwindcss.com/docs/extracting-components