4 ms·

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces

by danaw 5mo ago

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled on Tailwind for the last few years is precisely because it enables me to build more robust application styling. tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors affecting styles unintentionally and really aids in debugging. jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind and a very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams tailwind is like most tools; it can be used well or poorly depending on who is using it

superfrank 5mo ago
> nothing about tailwind forces you to build inaccessible or "div soup" apps Totally agree. I feel like this was more a by product of React. Not that React forced this either, but it felt like the rise in both went hand in hand for some reason. While I think it's true that none of the current top FE technologies force the div soup, they don't discourage it either. It would be nice if what ever FE technologies catch on next did try to encourage better practices around things like accessibility. Make the path of least semantic HTML the path of least resistance and allow people to fall into the pit of success, ya know?
- TonyAlicea10 5mo ago
  React encouraged this for years by requiring a single parent element being returned from all components. They also showed a div as the option of choice. They fixed this later with Fragments but the damage was done.
- ghurtado 5mo ago
  Nothing about programming forces anyone to do anything. That's never been a valid argument to dismiss criticism. It wasn't with Dreamweaver, any it wasn't with visual basic, and it isn't with Tailwind. Patterns matter. Best practices matter. Path of least resistance matters. Those are all choices you make when you develop a CSS framework. Some of those choices are good and some are bad. If none of those things mattered, them choosing a CSS framework would not matter at all.
  - superfrank 5mo ago
    > Nothing about programming forces anyone to do anything I see you've never written any Go
- danaw 5mo ago
  svelte does a decent job around warning about inaccessible components / elements. they're mostly focused on accessibility but in a way that's what really matters outside of SEO
TonyAlicea10 5mo ago
If a tool’s design makes it easy to cut myself, the response is not “people have been cutting themselves for years”. There is such a thing as the ergonomics of the tool. Yes div soup has been around a long time. But also yes, Tailwind makes the wrong approach the easy one. It’s ergonomics encourage adding div elements to support styles. It’s the core design loop. You’re conflating “forces to” and “ergonomically encouraged”.
- solumunus 5mo ago
  It’s just the most effective approach, in my opinion. If it’s wrong then I don’t want to be right.
  - eager_learner 5mo ago
    to solumunus: notice your comment downvoted? it appears someone who is against Tailwind downvotes all pro-Tailwind comments. I think i know who- and will reciprocate in kind.
- danaw 5mo ago
  i just don't agree tailwind makes it any more easy to make div soup than any other approach. if you don't care or know how to build proper markup no style approach is going to save (or hinder) you
  - deleted 5mo ago
    [deleted]
ghurtado 5mo ago
> can tailwind be used poorly? absolutely. but that's true of any tool Can tailwind be a useful CSS framework? Absolutely, but that can be said of any of them. Which is precisely why it makes sense to point out it's unique flaws, so that people can make an informed decision as to what works best for them. If you have some unique feature to tailwind that you think makes it better than the rest, you should share that. Everything you have listed is also accomplished by all the other CSS frameworks, so it almost sounds like tailwind is simply the main one you have experience with.
- andersonpico 5mo ago
  that's a really useful way to frame the discussion around tooling
- deleted 5mo ago
  [deleted]
- csallen 5mo ago
  > Tailwind instead pushes the dev into a CSS-first approach. You think about the Tailwind classes you want, and then throw yet-another-div into the DOM just to have an element to hang your classes on. But this isn't a unique flaw for Tailwind. I've been coding with CSS since the late '90s and seen plenty of people throw yet-another-div onto the DOM just to have an element to hang their classes on. Done so myself plenty of times, too. People have been complaining about div soup for years and years before Tailwind ever came along. Plus I'm coding with Tailwind now, and almost never think about my classes before my HTML. Nothing about Tailwind in particular encourages you to do so. So I'm quite confused how this is a unique Tailwind flaw.
- gf000 5mo ago
  Even the root comment mentions the exact same failure mode: > If you need extra elements for styling at that point, you might use a div or span (but you should ask yourself if there's something better first). This is IMO not worse than vanilla CSS, and it's simply the only way to have customizable layouting in HTML.
  - 5mo ago
arealaccount 5mo ago
I’ve mentioned this before here, but originally I was against Tailwind because it breaks the Cascading part of CSS, however I think a lot of websites lately work better with “locally scoped” styles as there are just so many different components that many things just dont need to follow a global style sheet. So now I usually reach for tailwind first, unless is a relatively simple vanilla html site
- codethief 5mo ago
  Global styles are like global state in software: They're best avoided.
  - xigoi 5mo ago
    Global state is bad because it’s mutable. Global styles are not mutable.
    - IceDane 5mo ago
      No.. that's not the only reason. Global state is bad because it makes it hard to reason about your system. The global state can affect any part of it, or, focusing on the inverse which is probably better applied to global styles, any part of your system can depend on the global state. It's also weird to say "global styles are not mutable" - you're right, they're (generally) not mutable, at runtime. But they are mutable in the sense that your developers (you, or your colleagues, or someone in 3 years maintaining your code) can mutate them, and if large parts of your system are implicitly dependent on the CSS cascading properly and so on, then those changes can have unintended consequences. Of course, that can also apply to tailwind, to some extent. A developer can change a class (custom or otherwise) or the configuration - but at least it is very clear what is being changed and what parts will be affected (just grep).
      - zelphirkalt 5mo ago
        With CSS unintended consequences are always problems of scoping things better. If I give semantically meaningful CSS classes to my semantic HTML and scope my rules to apply to their intended place in the pages, then unintended consequences don't happen. If I roll like: "Oh, I want this list to look differently, lets make a global scope ul/ol style!" then I am asking for trouble later on. When I write a CSS rule, I should always be thinking about the scope and whether my rules are truly something universally applicable to that scope.
alwillis 5mo ago
> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposite. Besides the obvious violation of DRY and the separation of concerns, inline CSS can't be cached and it creates a lot of noise when using dev tools for debugging. It actually increases cognitive load because you have to account for CSS in two different locations. Lots of people use Tailwind because they don't want to deal with the cascade, usually because they never learned it properly. Sure, back in the day, the web platform didn't provide much built-in support for addressing side effects of the cascade, but now we have @layer and @scope to control the cascade. Tailwind uses a remnant of '90s web development (inline CSS) and built an entire framework around it. I get why it appeals to some people: it lets you use CSS while not requiring an understanding of how CSS works, beyond its most basic concepts.
- ricw 5mo ago
  I disagree with that conclusion. I see tailwind as a cleaner more succinct version of css that is much easier to manage and add features too. Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin. CSS is too detailed and too verbose. Frameworks like bootstrap are too high level and don’t give enough control. Tailwind hits the sweet spot whilst allowing me to be detailed if I want to. It allows me to just get it done.
  - jampekka 5mo ago
    > Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin. How does this happen? You can always override css values. Either by ordering, !important, inline or, to make very sure, with inline !important.
    - deleted 5mo ago
zelphirkalt 5mo ago
> i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled on Tailwind for the last few years is precisely because it enables me to build more robust application styling. I think herein lies at least part of the problem of the web these days: Most websites don't need to be applications, and are needlessly made to be applications, often even SPAs instead of simply being mostly informational pages, in turn putting different requirements for styling onto the project. > [...] jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps There is no need for frameworks. Well structured and scoped CSS can handle it all. > add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind What if not that does CSS already offer? I don't see how normal CSS does not already do that. No additional thingamabob needed. > very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams Tons of ready-made stylesheets out there to use for teams. What more of an "ecosystem" do I need to style a web page? Why do I need an ecosystem? Is it not rather a tailwind self-induced need?
- danaw 5mo ago
  > Most websites don't need to be applications, and are needlessly made to be applications, often even SPAs instead of simply being mostly informational pages, in turn putting different requirements for styling onto the project. you read a lot into me choosing "application" instead of using "website". for the record i think tailwind works great for both and it actively using in in a many tens of thousands of LOC web "application" and managing a team using it on a fortune 100 mostly static website that gets millions of views a month. tailwind works great for both and in fact i'd argue works even better on "static" sites because it's efficient bundles and selector compression over the wire. we don't ship a single byte of css we don't use, thus saving on wasted bandwidth and increasing our SEO/page speeds > There is no need for frameworks. Well structured and scoped CSS can handle it all. i love when people are so confident other people don't have valid reasons to use tools. real "junior dev" vibes, my friend > What if not that does CSS already offer? I don't see how normal CSS does not already do that. No additional thingamabob needed. how many "bespoke" css projects have you worked on? i've works on MANY. nearly all of them suck to get familiar with and to not risk messing up some weird selector hierarchy you weren't aware of. can it be done well? sure, but it's incredibly rare and often only happens on smaller teams/projects. scaling out bespoke css sites becomes increasingly challenging as you scale in LoC and team size. on the other hand, give me any tailwind project and i can start contributing immediately > Tons of ready-made stylesheets out there to use for teams. What more of an "ecosystem" do I need to style a web page? Why do I need an ecosystem? Is it not rather a tailwind self-induced need? ready-made stylesheets? do you mean like a css/html template? the ecosystem means IDEs work well with it, there are lots of help resources, llms are trained on them heavily, you can find devs who know how to be productive with it, etc. you can be very familiar with css but struggle within some bespoke framework with the fact that you can structure css in near infinite ways. tailwind gives you a consistent structure and approach across projects
kcrwfrd_ 5mo ago
I’ve also been writing CSS professionally for nearly 20 years and am a big fan of tailwind. The ergonomics in my day to day work are quite nice. To me, the better boundary of abstraction shifted to components, rather than the html/css/js “separation of concerns” that some of the older folks still like to parrot. However, take a look at the markup and styling for the https://maps.apple.com/ https://maps.apple.com/ web property. I can’t deny that it’s quite beautiful and easy to holistically understand. Especially when it comes to the responsive styling—which is when I tend to find tailwind most awkward. It’s my favorite example of “traditional” CSS structure in recent memory that has given me some pause when it comes to Tailwind.
- paulhebert 5mo ago
  For what it’s worth I like to encapsulate things in components and still separate out the CSS from the markup. In my mind it’s the best of both worlds. Vue makes it easy. I think CSS modules in React work similarly
pwdisswordfishq 5mo ago
> nothing about tailwind forces you to build inaccessible or "div soup" apps https://en.wikipedia.org/wiki/The_purpose_of_a_system_is_what_it_does https://en.wikipedia.org/wiki/The_purpose_of_a_system_is_wha... So what if it does not "force" you?
- RcouF1uZ4gsC 5mo ago
  Now do CSS in real life use
- danaw 5mo ago
  i've worked on about 8 different production teams/products with tailwind and none were div soup. does that prove your claim wrong? at what point would you accept maybe some people know how to use html AND tailwind together?
  - deleted 5mo ago
    [deleted]
The_President 5mo ago
Proclaiming professional advice on the internet should compel you to bother using proper caps and punctuation. To your point - you are addressing the symptoms of bad understanding of CSS and it's relationship to the DOM. While tailwinds is a useful tool, it's not particularly special.
- danaw 5mo ago
  could you read what i wrote? if capitalizing words make me unprofessional, so be it :shrug:
  - The_President 5mo ago
    It's evident that proofreading your own comment might be more effective if it were written more carefully from the start. Most people indent their code for legibility - if someone showed up to a code base and didn't do that, it could be offputting to anyone reading it.
dimgl 5mo ago
> you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps +1
ai_fry_ur_brain 5mo ago
Can you provide an example of well written components that use Tailwind? Genuinely curious to see what that looks like.
- danaw 5mo ago
  have a look at tailwind ui to start: https://tailwindcss.com/plus https://tailwindcss.com/plus
  - TonyAlicea10 5mo ago
    This is ironic to me because Tailwind’s paid templates are absolutely terrible div soup.
deleted 5mo ago
[deleted]
eager_learner 5mo ago
i am no pro-- just a lurker wanting to learn -- and comments like danaw's are the reason my time on HN is not wasted. Thank you.
espadrine 5mo ago
Could you link to a project that you consider the best Tailwind use you know? I have a bias against Tailwind, admittedly because I saw some vibecoded Tailwind where each class was essentially equivalent to style="font-size: 4em; background-color: grey; display: flex;", all of which was repeated for each header. But that could be my bias; perhaps the right way to use is is DRY.
- sntran 5mo ago
  It's easy to look at one part of the HTML and see the Tailwind classes no different than inline styles. But if you have to use `display: flex" in a lot of places, having the `flex` utility is better. And there are tons of such utilities with Tailwind.
atoav 5mo ago
The first example on the official tailwind website right now starts like this: <div class="flex flex-col items-center p-7 rounded-2xl">...</div> The problem with tailwind is that semantic HTML should be entirely free of styling decisions in the ideal case. That also goes for styling classes like flex flex-col etc. The way I would do it is to give the HTML some semantic meaning: <section class="info-for-nerds">...</section> We can then decide how to treat section.info-for-nerds. Someone who reads the HTML immediately knows that this section is the bit that gives slightly too much information for nerds. That is what semantic means. The class adds meaning in a semantic sense, that helps to interpret the purpose of the element. Then in CSS you would just style the semantic.info-for-nerds text fully with flex, flex-col, the whole shabang. If there are other info boxes that share style adding a general info-box class is probably a good idea. Again, this is semantic. I don't say red-box. I say what the box is intended to mean, not how it looks. If you need the Infobox to look different in another context (or want to be sure your selector doesn't leak) you use the cascading bit of the language; .page-article>article>section.info-for-nerds { ... } .page-catalog>section.summary>section.info-for-nerds { ... } Notice btw. that I also prefer to use semantic HTML elements like section, article, main, aside over generic ones like div. Using these well may even mean you don't need any classes at all. If you have three nested divs classes are the only way to k ow which one is the article. If you have main containing article containing section, that may literally be all the info you need.
xtiansimon 5mo ago
> “…nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. […] tailwind is like most tools; it can be used well or poorly depending on who is using it.” Hmm. Your reply refutes the div-soup accusation, but doesn’t provide any explanation.

by danaw 5mo ago

superfrank 5mo ago

> nothing about tailwind forces you to build inaccessible or "div soup" apps Totally agree. I feel like this was more a by product of React. Not that React forced this either, but it felt like the rise in both went hand in hand for some reason. While I think it's true that none of the current top FE technologies force the div soup, they don't discourage it either. It would be nice if what ever FE technologies catch on next did try to encourage better practices around things like accessibility. Make the path of least semantic HTML the path of least resistance and allow people to fall into the pit of success, ya know?

TonyAlicea10 5mo ago
React encouraged this for years by requiring a single parent element being returned from all components. They also showed a div as the option of choice. They fixed this later with Fragments but the damage was done.
ghurtado 5mo ago
Nothing about programming forces anyone to do anything. That's never been a valid argument to dismiss criticism. It wasn't with Dreamweaver, any it wasn't with visual basic, and it isn't with Tailwind. Patterns matter. Best practices matter. Path of least resistance matters. Those are all choices you make when you develop a CSS framework. Some of those choices are good and some are bad. If none of those things mattered, them choosing a CSS framework would not matter at all.
- superfrank 5mo ago
  > Nothing about programming forces anyone to do anything I see you've never written any Go
danaw 5mo ago
svelte does a decent job around warning about inaccessible components / elements. they're mostly focused on accessibility but in a way that's what really matters outside of SEO

TonyAlicea10 5mo ago

If a tool’s design makes it easy to cut myself, the response is not “people have been cutting themselves for years”. There is such a thing as the ergonomics of the tool. Yes div soup has been around a long time. But also yes, Tailwind makes the wrong approach the easy one. It’s ergonomics encourage adding div elements to support styles. It’s the core design loop. You’re conflating “forces to” and “ergonomically encouraged”.

solumunus 5mo ago
It’s just the most effective approach, in my opinion. If it’s wrong then I don’t want to be right.
- eager_learner 5mo ago
  to solumunus: notice your comment downvoted? it appears someone who is against Tailwind downvotes all pro-Tailwind comments. I think i know who- and will reciprocate in kind.
danaw 5mo ago
i just don't agree tailwind makes it any more easy to make div soup than any other approach. if you don't care or know how to build proper markup no style approach is going to save (or hinder) you
- deleted 5mo ago
  [deleted]

ghurtado 5mo ago

> can tailwind be used poorly? absolutely. but that's true of any tool Can tailwind be a useful CSS framework? Absolutely, but that can be said of any of them. Which is precisely why it makes sense to point out it's unique flaws, so that people can make an informed decision as to what works best for them. If you have some unique feature to tailwind that you think makes it better than the rest, you should share that. Everything you have listed is also accomplished by all the other CSS frameworks, so it almost sounds like tailwind is simply the main one you have experience with.

andersonpico 5mo ago
that's a really useful way to frame the discussion around tooling
deleted 5mo ago
[deleted]
csallen 5mo ago
> Tailwind instead pushes the dev into a CSS-first approach. You think about the Tailwind classes you want, and then throw yet-another-div into the DOM just to have an element to hang your classes on. But this isn't a unique flaw for Tailwind. I've been coding with CSS since the late '90s and seen plenty of people throw yet-another-div onto the DOM just to have an element to hang their classes on. Done so myself plenty of times, too. People have been complaining about div soup for years and years before Tailwind ever came along. Plus I'm coding with Tailwind now, and almost never think about my classes before my HTML. Nothing about Tailwind in particular encourages you to do so. So I'm quite confused how this is a unique Tailwind flaw.
gf000 5mo ago
Even the root comment mentions the exact same failure mode: > If you need extra elements for styling at that point, you might use a div or span (but you should ask yourself if there's something better first). This is IMO not worse than vanilla CSS, and it's simply the only way to have customizable layouting in HTML.
- 5mo ago

arealaccount 5mo ago

I’ve mentioned this before here, but originally I was against Tailwind because it breaks the Cascading part of CSS, however I think a lot of websites lately work better with “locally scoped” styles as there are just so many different components that many things just dont need to follow a global style sheet. So now I usually reach for tailwind first, unless is a relatively simple vanilla html site

codethief 5mo ago
Global styles are like global state in software: They're best avoided.
- xigoi 5mo ago
  Global state is bad because it’s mutable. Global styles are not mutable.
  - IceDane 5mo ago
    No.. that's not the only reason. Global state is bad because it makes it hard to reason about your system. The global state can affect any part of it, or, focusing on the inverse which is probably better applied to global styles, any part of your system can depend on the global state. It's also weird to say "global styles are not mutable" - you're right, they're (generally) not mutable, at runtime. But they are mutable in the sense that your developers (you, or your colleagues, or someone in 3 years maintaining your code) can mutate them, and if large parts of your system are implicitly dependent on the CSS cascading properly and so on, then those changes can have unintended consequences. Of course, that can also apply to tailwind, to some extent. A developer can change a class (custom or otherwise) or the configuration - but at least it is very clear what is being changed and what parts will be affected (just grep).
    - zelphirkalt 5mo ago
      With CSS unintended consequences are always problems of scoping things better. If I give semantically meaningful CSS classes to my semantic HTML and scope my rules to apply to their intended place in the pages, then unintended consequences don't happen. If I roll like: "Oh, I want this list to look differently, lets make a global scope ul/ol style!" then I am asking for trouble later on. When I write a CSS rule, I should always be thinking about the scope and whether my rules are truly something universally applicable to that scope.

alwillis 5mo ago

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposite. Besides the obvious violation of DRY and the separation of concerns, inline CSS can't be cached and it creates a lot of noise when using dev tools for debugging. It actually increases cognitive load because you have to account for CSS in two different locations. Lots of people use Tailwind because they don't want to deal with the cascade, usually because they never learned it properly. Sure, back in the day, the web platform didn't provide much built-in support for addressing side effects of the cascade, but now we have @layer and @scope to control the cascade. Tailwind uses a remnant of '90s web development (inline CSS) and built an entire framework around it. I get why it appeals to some people: it lets you use CSS while not requiring an understanding of how CSS works, beyond its most basic concepts.

ricw 5mo ago
I disagree with that conclusion. I see tailwind as a cleaner more succinct version of css that is much easier to manage and add features too. Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin. CSS is too detailed and too verbose. Frameworks like bootstrap are too high level and don’t give enough control. Tailwind hits the sweet spot whilst allowing me to be detailed if I want to. It allows me to just get it done.
- jampekka 5mo ago
  > Sure it’s not as dry, but I’ve been bitten in this regard because css framework and templates are so intransparent, preventing me from simply changing padding or margin. How does this happen? You can always override css values. Either by ordering, !important, inline or, to make very sure, with inline !important.
  - deleted 5mo ago

zelphirkalt 5mo ago

> i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled on Tailwind for the last few years is precisely because it enables me to build more robust application styling. I think herein lies at least part of the problem of the web these days: Most websites don't need to be applications, and are needlessly made to be applications, often even SPAs instead of simply being mostly informational pages, in turn putting different requirements for styling onto the project. > [...] jumping into codebases with bespoke css frameworks is always more complex and fragile than a tailwind codebase for anything but the most simple sites/apps There is no need for frameworks. Well structured and scoped CSS can handle it all. > add to that the ability to have consistent type, color and sizing scales, reduced bundle sizes, consistency for any developer who knows tailwind What if not that does CSS already offer? I don't see how normal CSS does not already do that. No additional thingamabob needed. > very robust ecosystem (and thus llms are very familiar with it) and tailwind is a really excellent choice for a lot of teams Tons of ready-made stylesheets out there to use for teams. What more of an "ecosystem" do I need to style a web page? Why do I need an ecosystem? Is it not rather a tailwind self-induced need?

danaw 5mo ago
> Most websites don't need to be applications, and are needlessly made to be applications, often even SPAs instead of simply being mostly informational pages, in turn putting different requirements for styling onto the project. you read a lot into me choosing "application" instead of using "website". for the record i think tailwind works great for both and it actively using in in a many tens of thousands of LOC web "application" and managing a team using it on a fortune 100 mostly static website that gets millions of views a month. tailwind works great for both and in fact i'd argue works even better on "static" sites because it's efficient bundles and selector compression over the wire. we don't ship a single byte of css we don't use, thus saving on wasted bandwidth and increasing our SEO/page speeds > There is no need for frameworks. Well structured and scoped CSS can handle it all. i love when people are so confident other people don't have valid reasons to use tools. real "junior dev" vibes, my friend > What if not that does CSS already offer? I don't see how normal CSS does not already do that. No additional thingamabob needed. how many "bespoke" css projects have you worked on? i've works on MANY. nearly all of them suck to get familiar with and to not risk messing up some weird selector hierarchy you weren't aware of. can it be done well? sure, but it's incredibly rare and often only happens on smaller teams/projects. scaling out bespoke css sites becomes increasingly challenging as you scale in LoC and team size. on the other hand, give me any tailwind project and i can start contributing immediately > Tons of ready-made stylesheets out there to use for teams. What more of an "ecosystem" do I need to style a web page? Why do I need an ecosystem? Is it not rather a tailwind self-induced need? ready-made stylesheets? do you mean like a css/html template? the ecosystem means IDEs work well with it, there are lots of help resources, llms are trained on them heavily, you can find devs who know how to be productive with it, etc. you can be very familiar with css but struggle within some bespoke framework with the fact that you can structure css in near infinite ways. tailwind gives you a consistent structure and approach across projects

kcrwfrd_ 5mo ago

I’ve also been writing CSS professionally for nearly 20 years and am a big fan of tailwind. The ergonomics in my day to day work are quite nice. To me, the better boundary of abstraction shifted to components, rather than the html/css/js “separation of concerns” that some of the older folks still like to parrot. However, take a look at the markup and styling for the https://maps.apple.com/ https://maps.apple.com/ web property. I can’t deny that it’s quite beautiful and easy to holistically understand. Especially when it comes to the responsive styling—which is when I tend to find tailwind most awkward. It’s my favorite example of “traditional” CSS structure in recent memory that has given me some pause when it comes to Tailwind.

paulhebert 5mo ago
For what it’s worth I like to encapsulate things in components and still separate out the CSS from the markup. In my mind it’s the best of both worlds. Vue makes it easy. I think CSS modules in React work similarly

pwdisswordfishq 5mo ago

> nothing about tailwind forces you to build inaccessible or "div soup" apps https://en.wikipedia.org/wiki/The_purpose_of_a_system_is_what_it_does https://en.wikipedia.org/wiki/The_purpose_of_a_system_is_wha... So what if it does not "force" you?

RcouF1uZ4gsC 5mo ago
Now do CSS in real life use
danaw 5mo ago
i've worked on about 8 different production teams/products with tailwind and none were div soup. does that prove your claim wrong? at what point would you accept maybe some people know how to use html AND tailwind together?
- deleted 5mo ago
  [deleted]

The_President 5mo ago

Proclaiming professional advice on the internet should compel you to bother using proper caps and punctuation. To your point - you are addressing the symptoms of bad understanding of CSS and it's relationship to the DOM. While tailwinds is a useful tool, it's not particularly special.

danaw 5mo ago
could you read what i wrote? if capitalizing words make me unprofessional, so be it :shrug:
- The_President 5mo ago
  It's evident that proofreading your own comment might be more effective if it were written more carefully from the start. Most people indent their code for legibility - if someone showed up to a code base and didn't do that, it could be offputting to anyone reading it.

dimgl 5mo ago

> you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps +1

ai_fry_ur_brain 5mo ago

Can you provide an example of well written components that use Tailwind? Genuinely curious to see what that looks like.

danaw 5mo ago
have a look at tailwind ui to start: https://tailwindcss.com/plus https://tailwindcss.com/plus
- TonyAlicea10 5mo ago
  This is ironic to me because Tailwind’s paid templates are absolutely terrible div soup.

deleted 5mo ago

[deleted]

eager_learner 5mo ago

i am no pro-- just a lurker wanting to learn -- and comments like danaw's are the reason my time on HN is not wasted. Thank you.

espadrine 5mo ago

Could you link to a project that you consider the best Tailwind use you know? I have a bias against Tailwind, admittedly because I saw some vibecoded Tailwind where each class was essentially equivalent to style="font-size: 4em; background-color: grey; display: flex;", all of which was repeated for each header. But that could be my bias; perhaps the right way to use is is DRY.

sntran 5mo ago
It's easy to look at one part of the HTML and see the Tailwind classes no different than inline styles. But if you have to use `display: flex" in a lot of places, having the `flex` utility is better. And there are tons of such utilities with Tailwind.

atoav 5mo ago

The first example on the official tailwind website right now starts like this: <div class="flex flex-col items-center p-7 rounded-2xl">...</div> The problem with tailwind is that semantic HTML should be entirely free of styling decisions in the ideal case. That also goes for styling classes like flex flex-col etc. The way I would do it is to give the HTML some semantic meaning: <section class="info-for-nerds">...</section> We can then decide how to treat section.info-for-nerds. Someone who reads the HTML immediately knows that this section is the bit that gives slightly too much information for nerds. That is what semantic means. The class adds meaning in a semantic sense, that helps to interpret the purpose of the element. Then in CSS you would just style the semantic.info-for-nerds text fully with flex, flex-col, the whole shabang. If there are other info boxes that share style adding a general info-box class is probably a good idea. Again, this is semantic. I don't say red-box. I say what the box is intended to mean, not how it looks. If you need the Infobox to look different in another context (or want to be sure your selector doesn't leak) you use the cascading bit of the language; .page-article>article>section.info-for-nerds { ... } .page-catalog>section.summary>section.info-for-nerds { ... } Notice btw. that I also prefer to use semantic HTML elements like section, article, main, aside over generic ones like div. Using these well may even mean you don't need any classes at all. If you have three nested divs classes are the only way to k ow which one is the article. If you have main containing article containing section, that may literally be all the info you need.

xtiansimon 5mo ago

> “…nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. […] tailwind is like most tools; it can be used well or poorly depending on who is using it.” Hmm. Your reply refutes the div-soup accusation, but doesn’t provide any explanation.