[nettlin]

When using Tailwind you’re likely to use something like React components, so your actual code is more likely to look like:

  <Menu>
    <MenuButton>Dropdown button</MenuItems>
    <MenuItems>…</MenuItems>
  </Menu>

which is even better than what Bootstrap provides since you get type safety for component props (and more opportunities for customization than what Bootstrap allows)

[notpushkin]

Type safety is good, but the class soup inside the components is just abysmal. And honestly, more often than not I see it spilling out of the components and onto the page layouts.

Design tokens are the one Tailwind feature I genuinely like. Everything else – kill it with fire. Just use whatever scoped CSS your stack does (<style> in Svelte/Vue, Emotion in React?).

[bernawil]

class soup is what tailwind is. It's terrible because is just abbreviations of css attributes which you still need to know because you'll inevitably fiddle around devtools trying things out.

The only "smart" thing about it is leaning strongly on using rem.

how can it spill out onto the page? it's inline css. The (rare) inline selectors target only descendants.

Truth is that it's winning over because it works best with LLMs. Inline soup works better than looking for styling on different files in the context of the project, so here we are.

[notpushkin]

> how can it spill out onto the page? it's inline css.

Because people are lazy and don’t make a component for everything. And some people are even lazier and don’t make UI components at all. I’ve seen a project where there was a Button component and that’s it. Well, that was vibe coded probably so makes sense.

> Inline soup works better than looking for styling on different files in the context of the project, so here we are.

Only if you have a separate .css. If you do UI components with [insert your favourite CSS-in-JS solution], it stays in the same file. Maybe the proximity to markup within the file is important?

But no, Tailwind has been rising in popularity long before LLMs came along.

[bernawil]

[I'm assuming styled-components was the preferred css-in-js solution until recently]

> If you do UI components with [insert your favourite CSS-in-JS solution], it stays in the same file.

I mean you can but "best practice" all around has been to put them separate and that's reflected in the majority of github repos in the training data of the LLMs.

> Maybe the proximity to markup within the file is important?

that's my assumption, yes. Seems to me LLMs work best when they output the relevant tokens right there with the markup instead of referencing some previous tokens even if relatively close.

styled components was the recommended solution in popular UI libraries like React MUI up until 2023 when chatgpt came out. Tailwind REALLY blew up with LLMs.

[notpushkin]

Yeah, I mean, with either Tailwind or styled-components you want to contain them to “UI components” – e.g. <Button> or <Navbar>. You could mix in some logic, and you’re right, looks like many styled-components folks will split it into two files then – but honestly I would just do in one.

Personally, I’m a Svelte fan, and I think they got it right – you just write <style> in your component and that’s it. I think Vue works in a similar way, too.

[phatskat]

> Truth is that it's winning over because it works best with LLMs. Inline soup works better than looking for styling on different files in the context of the project, so here we are.

I saw this on another recent tailwind thread and I’m not sure I agree. LLM might be helping adoption, but I’ve been seeing and using tailwind for years without really going near LLM coding

[bernawil]

oh I'm not saying tailwind didn't have significant adoption before, but post LLMs is when major adoption from frameworks came as the default choice.