It does remove a small aspect of its usefulness, but the other ones I’ve mentioned still exist.
I’ll use Svelte as an example. In Svelte, you can just put a style tag at the bottom of your component, and everything you put in there is automatically scoped to it. I’m not hunting through dozens a CSS files trying to find where a class was overridden and adding !important everywhere. Using vanilla CSS allows me to keep my markup clean and concise so I can better see the actual structure of each component without dozens of CSS class names cluttering everything up.
Several points:
You still have to hunt through the file to find any selectors applying to your elements. There’s still a bunch of vertical jumping around.
How often do you actually need to see the structure of your DOM without styles? I want to see it with styles much more often than without.
You still have to come up with unique class names for everything in your DOM, or you’ll have brittle selectors. This means that for every single component in every single project I have to learn the class names, and they might even change over time. This is a lot of overhead.
In my experience, Tailwind was good as long as I didn’t try to do anything too interesting. What ended up happening in my project was that I would use Tailwind classes for basic styling, then break into vanilla CSS whenever Tailwind wasn’t sufficient. And that meant I was looking in multiple places to see what styling was affecting my component… which kinda defeated the purpose of using Tailwind.
You almost always have to look in multiple places with normal CSS styling, since it’s cascading. If I can solve 95+% of my apps styling needs inline and just break out for special cases, I still remove most of the jumping around and class name overhead and so on. This is still a massive advantage.