Component CSS Styling

I prefer scoped css, eg svelte or react with CSS modules. This allows one to closely pair the styles with the component, but still separate out the styling from the html (I cannot stand tailwind/inline syles)

You're misunderstanding. Styled components is a specific concept that uses CSS within JS: https://www.styled-components.com/The mess with CSS comes from the difficulty of code resuability once an application becomes complicated. Things start colliding and patterns diverge easily.

It’s odd, judging from a lot of the HN comments in the recent tailwind article, people find the lack of CSS inside react components (out of the box, I’m sure there’s ways of setting it up) enough of a hassle they want to style things in HTML - just to keep their styling in the same component. Something Vue and Svelte and others solve out of the box.

What's the advantage of css in js as opposed to just plain css?

If you work with components then why not just use CSS?

In component-based apps/systems C in CSS is often the last thing you want, if you ever want that.

What you describe sounds like the way some use CSS-in-JS frameworks as emotion or Styled Components.

This is not the way either. I use CSS-in-JS which has its own flaws, but CSS stays with the component.

I think the author is arguing for using something like styled-jsx, which is the same as vue SFC styles afaik. That stays fairly manageable and readable as well.

Why do you think CSS-in-JS has only caught on in the React community?