[bern4444]

My initial reaction to Tailwind was: what a pain. I already know CSS, now I have to learn CSS again...

I imagine its how parents might feel when they go to help their children with math homework only to find the math is now totally different from when they were in school and their methods (while still valid) for solving problems are no longer accepted by the school and their child is annoyed by having to reconcile the two systems...

I get the, tailwind works well in a team and scales nicely and you just have to use it, mentality. I've experienced it.

I still prefer a plain style sheets that targets elements by a class or tag (especially since CSS supports nested selectors!).

There is an issue in managing stylesheets, and for that I really like how Remix/React Router manages CSS where CSS flies are defined and applied at the route level. Where that isn't enough or dynamic styles are too complex for a .css file:

    style={{...}}

is always available.

CSS is so powerful, flexible, and extensible, tailwind feels like a limitation rather than an enhancement. I don't understand the continued appeal, but clearly many others do. I'm not sure why, but I am confident we'll all have moved on to something else in another 3 or 4 years too.

[jitl]

I agree it’s frustrating initially to re-learn CSS… I used to make the same arguments. But after contributing to an open-source project using Tailwind I got up to speed, and now I feel differently.

Tailwind is essentially just stenography for style={{…}} - a single utility takes 15 characters that would take multiple lines in a .css file or style object. It greatly reduces the amount of time I need to spend googling stuff like “visual text replacement css” or perusing various css cheat sheets or skimming through css-tricks blog posts from 8 years ago. Instead I always go to tailwind docs, and quickly learn the utility class that just does the thing I want. A surprising amount of it fits in my brain cache, much more than trying to cache the css for all the tasks I might need to do in a layout.

[Aeolun]

I think it’s because now your entire component is contained in a single file. No more separately messing around with CSS. The styles are right there on the element they apply to without having to cross reference anything.

You could do this with just the css attribute, but that has the issue that everyone has always been taught it is wrong to do that, and a list of strings that contain a bunch of utility is easier than writing those plain CSS objects.

[arkh]

> You could do this with just the css attribute, but that has the issue that everyone has always been taught it is wrong to do that

But why is it wrong to use the style attribute? What makes using tailwind to do the same thing "not wrong"?

Also this https://tailwindcss.com/docs/hover-focus-and-other-states#us... and https://tailwindcss.com/docs/hover-focus-and-other-states#st... look like reinventing the Cascading of CSS with an awful syntax.

[Aeolun]

> But why is it wrong to use the style attribute? What makes using tailwind to do the same thing "not wrong"?

The time people were taught it was wrong is thr time when all your elements were rendered on the server and the style was duplicated for every component it applied to.

Client rendered JS only sends it over the wire once and then duplicates it on the client.

Tailwind only allows a few options, so it’s less likely you have slightly different styles everywhere.

I think the awful syntax you talk about is really nice, since it covers 99% of everything I ever need to do with it. The cascading part of CSS is really cool, but 99% of the time it’s confusing when I don’t need it.

[jitl]

Tailwind I use for hobby projects but we’re still sticking with style={{…}} at Notion. Since the app launched there’s been many generations of CSS-for-React (Airbnb Aphrodite era, styled-components/Emotion era, styled-jsx/linaria era, CSS modules era, Tailwind era) come up, get hype, and then thrown in the trash heap. Probably the best move for us would be an optimizing compiler for style={{…}} or our useStyles hook.

[atonse]

I think it's also about automatically purging and slimming down your CSS, which is easier to do when you're just comparing tokens.

Although nowadays I'm sure they could technically do the same thing with the built in parsers without having to rely on just simple tokens.

[sebmellen]

Limitation reduces available complexity and that’s why tailwind wins. It’s a composable, standardized, and modularized wrapper around a very massive and complex system. That’s a big advancement.

[nedt]

I'm learning math with my kid and it's not different to what I learned. Can still solve everything quickly.

On the other hand there are those posts on social media mixing multiplication and division and telling you there is only one true answer to those. Tailwind isn't that bad, but it's more into this direction for me as an old fart ;)

[mrits]

In the US you can get all the right answers on a test and still fail