You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.

Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element.

@scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance

Colocation is a useful principle in component-based architecture.

Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.

Is staying in one file supposed to be difficult or something?