Hacker News new | ask | show | jobs
by Aeolun 509 days ago
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.
1 comments
arkh 509 days ago
> 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.

link
Aeolun 508 days ago
> 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.

link
jitl 508 days ago
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.
link
atonse 508 days ago
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.

link