Separation of concerns went out of the window a long time ago when frameworks (i.e. React) showed that it's better to combine business logic + markup into a neat encapsulated package.

Having a neatly encapsulated component that does everything is fine in most setups. Your main challenge will be not growing these components too big.

(( I really dislike Tailwind btw, mostly because I am just translating CSS into something else all the time which feels like a waste of mental effort; and the long lines of cryptic classnames is just bizarre to gain such a big popularity. I loathe it, it's a maintenance hell. I imagine all frontend devs liking this grew up using Bootstrap or something and mostly do small projects ))

that's the power of functional cohesion

> their pay-for-documentation model

Yikers this comment sets the stage for a real bad game of phone tag! I think you're mistaking TailwindUI[0], the set of proprietary UI component cheat codes based on top of TailwindCSS, with TailwindCSS[1], the actual CSS library being discussed here.

[0] https://tailwindui.com/

[1] https://tailwindcss.com/

Fair enough, odd that a link to the other isn't somewhere visible on the front page.

I'd give the makers of Tailwind the benefit of the doubt here. TailwindUI was very much launched well after Tailwind CSS was popular, and they probably assumed you'd only find it after you'd kicked the Tailwind CSS tires a bit.

> Also, it makes me sad to see people so eager to throw away separation of concerns

I don’t think it has ever lived up to expectations, HTML+CSS in that way is simply broken. You can’t really write CSS without hard-coding the HTML structure, so you might as well do it in one file.

No, I think people just suck now. While you can't eliminate all structural concerns in CSS (think nesting selectors), sensible class naming and adhering to the structure of the medium (instead of fighting it by trying to directly translate a photoshop mockup or w/e), this is entirely possible.

But now you just have a single-use html+stylesheet, as I wrote. No separation of concern anywhere, and both html and css can only be written by knowing the other part.

Why is the stylesheet single use? The classes can be used anywhere, as they should be. Make components in the CSS and call them by their classname in HTML. You are building generic components here.

I don't see the issue with 'separate files', do people not use split view mode in their IDE?

edit- this comment in another thread: https://news.ycombinator.com/item?id=33789859

> Why is the stylesheet single use? The classes can be used anywhere, as they should be. Make components in the CSS and call them by their classname in HTML. You are building generic components here.

The problem with reusing CSS comes, when the style you’ve previously created, is almost, but not exactly perfect for the current component. Changing it to better fit you current need risks breaking existing layouts, and so you are left with overriding it. But when you do that, you eventually end up with a lot of override classes just to change one or two things. So, what do you name these classes? If you name them for what they are intended for (ie. “semantically”), you are bound to end up with a lot of differently named classes, that all do the same or nearly the same thing, because it turns out that we commonly want to override the default styling in very similar ways. You end up with dozens of one-rule classes that all just set float to right or display to none. Alternatively, you name these overrides for what they do. This way, whenever you need to float something right, you just add the `float-right` class to the element. You can now eliminate all those redundant semantically names override classes. But if you go back to the classes you started with, it also turns out that those would have been a lot more reusable if they’d contained fewer rules to begin with. This makes sense, because more rules = more specific, and fewer rules means more general. At this point, I’m sure I don’t have to point out to you, that you’re well on your way to reinventing Tailwind.

But you aren't building a generic product. You are building something specific.

I'm my experience the _vast_ majority of CSS never gets reused. Sure if all you are building is marketing websites or landing pages then I suppose some generic "cards" or whatever will get you pretty far, but for anything even moderately more complex... no chance

I fought against this for a long time, but I have to agree. CSS right next to your HTML/Components makes it a lot easier to keep track of.

Maybe it would've been possible to build tooling around using CSS files that created the same benefits, but now we just don't have to any more.

Honestly a style tag always seemed like a pretty good idea for local styling, despite pretty universally being condemned as "the wrong way".