I'm really confused about what's meant to be good about Tailwind.

I recently ran create-next-app with Tailwind, and the default example output page has several divs with 600+ characters of tailwind class names. Each! Without word wrap most of the page's style information is way off the right side of the screen, and with word wrap the page source is mostly class names. Is this how tailwind pages are meant to look?

Also, with tailwind the page's style information is all in class names - which are plaintext, with no syntax highlighting or code hints or linter errors. Do people using tailwind maintain styles that way, or is there a quasi-mandatory plugin or something?

The only obvious benefit I see for tailwind is that style rules are tied directly to the markup they modify. But if I use any SFC framework like vue or svelte, I can have scoped CSS with the style rules right next to the markup, and I also get legible style rules, code hints, CSS variables, and everything else. What is it that tailwind makes better?

This article explains the reasoning pretty well:

https://adamwathan.me/css-utility-classes-and-separation-of-...

Hmm. Thanks for the link; I can see where that argument comes from.

But doesn't that entire line of thinking disappear if one just uses scoped CSS inside components? Everything in that link assumes that all CSS rules are global, and it runs through BEM and then tailwind as a way to avoid putting component-specific rules in the global CSS file.

But if you just use a frontend framework with SFCs, you can treat each component as a module with its own local style rules. If there's no global CSS file to edit, don't BEM and Tailwind become irrelevant, since the problem they solve no longer exists?

That's exactly my perspective. Tailwind tries to make inline CSS workable, but there are so much better options in available in a frontend frameworks.

Some people have just completely internalised the "CSS bad" mindset, and for them, literally anything is better.

Yeah, actually! I'm using it at my current internship. I like it because the syntax is shorter and is sometimes reworded to be clearer, but there's still some flaws in Tailwind. To use the shorter stuff, like mt-8, you have to first know that mt stands for margin-top, which means it's not replacing knowing CSS to some degree first. Writing my styling inline is also not amazing. Working with their documentation is a breeze though.