14 ms·

What were the benefits that you felt instantly? I still don't feel anything and would prefer plain CSS over Tailwind any day.

ForHackernews 9mo ago
It lets you apply styles to a single element without it messing up the whole rest of the page/site/app. i.e. it disabled the primary feature of CSS, the thing most people don't want from it.
- Tade0 9mo ago
  How is that different than inline styles?
  - azangru 9mo ago
    Very different :-) Inline styles do not have access to @-rules.
    - matt_kantor 9mo ago
      @scope[0] is perhaps a better comparison. [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
- peacebeard 9mo ago
  I agree that the primary feature of CSS is what people don't want from it anymore. If you're building your app with components (web components, react, etc), those become the unit of reuse. You don't need CSS to offer an additional unit of reuse, it only complicates things at that point.
  - azangru 9mo ago
    > You don't need CSS to offer an additional unit of reuse Erm. Isn't this one of tailwind's selling points? That you have a set of classes that you keep reusing?
    - hamandcheese 9mo ago
      This is technically true, but misses the point. Tailwind classes are fine grained utility classes, the fact that they are CSS classes at all is pretty much an implementation detail. Compare tailwind classes to bootstrap classes and you'll see what I mean.
  - matwood 9mo ago
    This is a great point. Style reuse was the dream of CSS, but we have all mostly settled that that's too fine grained for anything beyond a simple website. It's much easier to build, share, reuse a bunch of components.
- azangru 9mo ago
  Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to learn?
  - troupo 9mo ago
    You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file https://github.com/css-modules/css-modules?tab=readme-ov-fil... then they need to be supported by whatever build chain you use. And you literally need to use them slightly different than normal CSS. E.g. for Vite yuo need to have `.module.css` extension. And they often rely on additional libraries to learn. E.g. you can enable Lightning CSS with aforementioned Vite which comes with its own CSS flavour: https://lightningcss.dev/css-modules.html https://lightningcss.dev/css-modules.html If you mean CSS import attributes, they only appeared in 2024 in Chrome and Firefox, early 2025 in mobile Android etc. and they don't provide magical local scoping out of the box: https://caniuse.com/wf-css-modules https://caniuse.com/wf-css-modules
    - owebmaster 9mo ago
      Well no, none of them ? This is what OP was talking about: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nest...
      - troupo 9mo ago
        No, he's not: https://news.ycombinator.com/item?id=46570846 https://news.ycombinator.com/item?id=46570846
        owebmaster 9mo ago
        Ignore it then, CSS nesting and layers are the real deal
- cluckindan 9mo ago
  Which means most people don’t understand the basics of what they’re working on.
- jasonkester 9mo ago
  I think that’s what people are talking about when they say they don’t see the benefit. There’s already a style attribute on every html element that does exactly that, and works fine in components. “There must be something more…?” But it turns out there’s not. Just shorthand class names to save you having to type padding-left:4px
  - pocketarc 9mo ago
    lg:dark:hover:bg-red-500 > on large screens > in dark mode > when hovering > bg should be red-500 The above is an unrealistic example, but, you can't achieve that with the style attribute. You'd have to go into your stylesheet and put this inside the @media query for the right screen size + dark mode, with :hover, etc. And you'd still need to have a class on the element (how else are you going to target that element)? And then 6 months later you get a ticket to change it to blue instead. You open up the HTML, you look at the class of the element to remind yourself of what it's called, then you go to the CSS looking for that class, and then you make the change. Did you affect any other elements? Was that class unique? Do you know or do you just hope? Eh just add a new rule at the bottom of the file with !important and raise a PR, you've got other tickets to work on. I've seen that done countless times working in teams over the past 20 years - over a long enough timeline stylesheets all tend to end up a mess of overrides like that. If you just work on your own, that's certainly a different discussion. I'd say Tailwind is still useful, but Tailwind's value really goes up the bigger the team you're working with. You do away with all those !important's and all those random class names and class naming style guide discussions. I used to look at Tailwind and think "ew we were supposed to do CSS separate from HTML why are we just throwing styles back in the HTML". Then I was forced to use it, and I understood why people liked it. It just makes everything easier.
- aleksandrm 9mo ago
  I can already do the same with plain CSS. How is this better?
watwut 9mo ago
Honestly, for me, tailwind was just pleasant to work with and pure css definitely was not. And I was super skeptical about it at first. I almost said no to it, but I trusted our main ui guy and wanted to allow him autonomy. And I ended up loving tailwind after working with it.
jackhuman 9mo ago
I first took a css courses to get the basics then didn’t do much with it, then tailwind came out. I had used bootstrap, but always struggled to get stuff to look nice. I’m not doing web dev most of the time. So it was much easier to memorize tailwind utility classes than css. These days with ui frameworks like daisy, shadcn, tailwind is pretty easy for doing something simple for an IT dev tool but still customize it. For creativity, I wished I had the time to get really good with css. It really seems to have grown a lot. Using sveltekit, its really easy to get component scoped css

ForHackernews 9mo ago

It lets you apply styles to a single element without it messing up the whole rest of the page/site/app. i.e. it disabled the primary feature of CSS, the thing most people don't want from it.

Tade0 9mo ago
How is that different than inline styles?
- azangru 9mo ago
  Very different :-) Inline styles do not have access to @-rules.
  - matt_kantor 9mo ago
    @scope[0] is perhaps a better comparison. [0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...
peacebeard 9mo ago
I agree that the primary feature of CSS is what people don't want from it anymore. If you're building your app with components (web components, react, etc), those become the unit of reuse. You don't need CSS to offer an additional unit of reuse, it only complicates things at that point.
- azangru 9mo ago
  > You don't need CSS to offer an additional unit of reuse Erm. Isn't this one of tailwind's selling points? That you have a set of classes that you keep reusing?
  - hamandcheese 9mo ago
    This is technically true, but misses the point. Tailwind classes are fine grained utility classes, the fact that they are CSS classes at all is pretty much an implementation detail. Compare tailwind classes to bootstrap classes and you'll see what I mean.
- matwood 9mo ago
  This is a great point. Style reuse was the dream of CSS, but we have all mostly settled that that's too fine grained for anything beyond a simple website. It's much easier to build, share, reuse a bunch of components.
azangru 9mo ago
Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to learn?
- troupo 9mo ago
  You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file https://github.com/css-modules/css-modules?tab=readme-ov-fil... then they need to be supported by whatever build chain you use. And you literally need to use them slightly different than normal CSS. E.g. for Vite yuo need to have `.module.css` extension. And they often rely on additional libraries to learn. E.g. you can enable Lightning CSS with aforementioned Vite which comes with its own CSS flavour: https://lightningcss.dev/css-modules.html https://lightningcss.dev/css-modules.html If you mean CSS import attributes, they only appeared in 2024 in Chrome and Firefox, early 2025 in mobile Android etc. and they don't provide magical local scoping out of the box: https://caniuse.com/wf-css-modules https://caniuse.com/wf-css-modules
  - owebmaster 9mo ago
    Well no, none of them ? This is what OP was talking about: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nest...
    - troupo 9mo ago
      No, he's not: https://news.ycombinator.com/item?id=46570846 https://news.ycombinator.com/item?id=46570846
      - owebmaster 9mo ago
        Ignore it then, CSS nesting and layers are the real deal
cluckindan 9mo ago
Which means most people don’t understand the basics of what they’re working on.
jasonkester 9mo ago
I think that’s what people are talking about when they say they don’t see the benefit. There’s already a style attribute on every html element that does exactly that, and works fine in components. “There must be something more…?” But it turns out there’s not. Just shorthand class names to save you having to type padding-left:4px
- pocketarc 9mo ago
  lg:dark:hover:bg-red-500 > on large screens > in dark mode > when hovering > bg should be red-500 The above is an unrealistic example, but, you can't achieve that with the style attribute. You'd have to go into your stylesheet and put this inside the @media query for the right screen size + dark mode, with :hover, etc. And you'd still need to have a class on the element (how else are you going to target that element)? And then 6 months later you get a ticket to change it to blue instead. You open up the HTML, you look at the class of the element to remind yourself of what it's called, then you go to the CSS looking for that class, and then you make the change. Did you affect any other elements? Was that class unique? Do you know or do you just hope? Eh just add a new rule at the bottom of the file with !important and raise a PR, you've got other tickets to work on. I've seen that done countless times working in teams over the past 20 years - over a long enough timeline stylesheets all tend to end up a mess of overrides like that. If you just work on your own, that's certainly a different discussion. I'd say Tailwind is still useful, but Tailwind's value really goes up the bigger the team you're working with. You do away with all those !important's and all those random class names and class naming style guide discussions. I used to look at Tailwind and think "ew we were supposed to do CSS separate from HTML why are we just throwing styles back in the HTML". Then I was forced to use it, and I understood why people liked it. It just makes everything easier.
aleksandrm 9mo ago
I can already do the same with plain CSS. How is this better?

watwut 9mo ago

Honestly, for me, tailwind was just pleasant to work with and pure css definitely was not. And I was super skeptical about it at first. I almost said no to it, but I trusted our main ui guy and wanted to allow him autonomy. And I ended up loving tailwind after working with it.

jackhuman 9mo ago

I first took a css courses to get the basics then didn’t do much with it, then tailwind came out. I had used bootstrap, but always struggled to get stuff to look nice. I’m not doing web dev most of the time. So it was much easier to memorize tailwind utility classes than css. These days with ui frameworks like daisy, shadcn, tailwind is pretty easy for doing something simple for an IT dev tool but still customize it. For creativity, I wished I had the time to get really good with css. It really seems to have grown a lot. Using sveltekit, its really easy to get component scoped css