How does Tailwind require bouncing between multiple files? Everything is in the HTML in the form of class names.

Yes, you will have to know what the classes do, but where that isn't already intuitive it's just a one-off lookup, and then you know.

HTML + CSS can simply not be parsed without hoping between multiple files. Unless you inline all of your CSS, of course.

I think the point in the comment you are replying to is that they _prefer_ having markup and styles in separate files.

You can still do that though. I swear half the Tailwind haters haven't used it for more than 30 minutes, or at all.

Then what's the advantage of Tailwind?

Standardised and clean CSS syntax. The benefits in that context are debatable, a component based frontend architecture is where it absolutely shines. If you end up using it in that context you won't need to ask this question, it quickly becomes clear that it's the optimal path.

What can't pure CSS do here and that Tailwind does ? The CSS syntax is already clean and standardized if you use it properly and don't name every little piece of interface. It is a genuine question, by the way...

CSS is standardized…

No, I have HTML and CSS in the same component file. I prefer having styling in one place (the CSS inside the component file) rather than two (the HTML of the component and tailwinds’s own postcss files that implement the styles).

Fwiw styled and emotion both offer ways to have cash in the same file as html/js

Yep Svelte and Vue do too. It seems like not having CSS in their components is the actual problem many people are trying to make better.

> How does Tailwind require bouncing between multiple files?

You have styling split between the classes and the actual CSS tailwind implements, which every team I know that has used tailwind absolutely does have to look at.

It's a vocabulary you quickly get used to, and when paired with editor plugins, it's a non-issue in my experience.

Yeah, and it's much better than trying to figure out what random class names some dev made up are doing.

I agree that ‘div soup’ is a problem - I’ve seen a lot of react code by new developers that resembles GWT generated DOMs. But ‘div soup’ has other problems too - way over complicated doms are hard to edit and debug - and the problem is better solved by learning CSS basics to avoid all the wrapper divs you see in React apps made by junior front end developers.

Most of the time I know the CSS already I have to convert it to tailwind - and devtools uses the same syntax so (as the article mentions) the abstraction leaks.

So just to be clear: your argument is that you like to cross reference multiple files before you know what is applied, when?