8 ms·

Tailwind and the Beauty of Ugly Code

80 points by sebg 3y ago

mrcwinn 3y ago
I've been using Tailwind since its release. I think it is fantastic and I'm so grateful for it. We're also happy customers of TailwindUI. I just launched a new product and we could not have gotten to market as quickly without Tailwind.
kamikaz1k 3y ago
Agree with author and the quote...after trying it, it really was like drinking the kool aid
NayamAmarshe 3y ago
Tailwind is fantastic, changed the whole game for me. I've built all my projects with Tailwind and I'm never going back to writing all the UI in regular CSS or SASS. CSS is still needed of course, but the 95% Tailwind + 5% CSS rule makes my life easier and happier.
lawn 3y ago
Clearly there are lots of people who love Tailwind, but for me it really misses the mark. Yes, it's extremely ugly and unreadable when you have 10-20 classes. But worse, you have to repeat them in other components even if you only want to change a single one of them. And making changes to multiple components, good luck. Thanks but no thanks. I'll continue with my systems designed in css and sass.
- akiselev 3y ago
  I use a vscode extension [1] to fold all CSS classes. Really helps to clean up the ugliness when I'm not focused on styling. For components, I move the class names to an @apply directive in a css rule [1] https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold https://marketplace.visualstudio.com/items?itemName=stivo.ta...
- burlesona 3y ago
  Tailwind makes a lot of sense for people who are doing componentized UI frameworks where they never write the same markup twice. But if you're actually writing markup in the more "traditional way" where you repeatedly mark semantic elements with classes in order to make them have a certain look and feel (and let CSS do the heavy lifting) then Tailwind is a mess. In my experience that distinction is the most of the difference between enjoying Tailwind and not.
  - diob 3y ago
    I don't get the reasoning, you could do the same with Tailwind, just make a mega class with all your "css". Nobody says you can't, although personally I don't do this. <div className={`${variableWithMultipleTailwindClasses}`} />
- kebsup 3y ago
  You can still use global styles with tailwind. After you style components like buttons, inputs and cards globally, I've found surprisingly low amount of repetition.
spaceman_2020 3y ago
I started teaching myself to code 8 months back. I was used to HTML/CSS so I used styled components initially. Someone persuaded me to give Tailwind a shot. It was a little rough start but I now really appreciate the pre-built styles, the intuitive naming schemes, and the confidence that it will just “work” across devices.
cutler 3y ago
[flagged]
siquick 3y ago
Tailwind might as well be CSS now as far as I’m concerned. It’s been 3 years of greatness.
c_s_guy 3y ago
I've never understood why public opinion is so polarizing on Tailwind. Could someone with experience in both camps help me understand the tradeoffs, and offer any guidance on whether Tailwind would (not) be a good fit?
- Cyberdog 3y ago
  Note that I'm a Tailwind hater. Tailwind and similar frameworks divorce the concept of a semantic web we as a society have been building towards for decades. It works against the idea that you mark up areas of your code with descriptive labels like "header" and then put the code describing how the header should appear in another easily-editable file, and instead encourages you to use generic style descriptors to describe how the header area of your site should appear in the HTML itself. This is how we built web sites before CSS was widely adopted and, though it was "easier" to do things like `<p color="#999999">` in HTML 3 rather than separate the code from the appearance markup, it was generally considered to be a really bad idea. But Tailwind and the like drag us back in that direction.
  - unmole 3y ago
    > concept of a semantic web we as a society have been building towards for decades This makes no sense to me. Semantic Web was a mostly failed attempt at making web pages readable to machines. Your actual complaint seems to be Separation of Concerns. Nevertheless, that is something that is only of interest to a subset of developers. Society doesn't care.
    - Cyberdog 3y ago
      How did it fail? Are you speaking just in terms of its slow adoption?
      - unmole 3y ago
        I'm speaking in terms of no adoption.
BFLpL0QNek 3y ago
The article name describes Tailwind exactly for me. I personally am a fan of schematic html/css. I remember the days off CSS Zen Garden, with well marked up html you can change the visual look completely by swapping out the style sheet. There’s a nice decoupling layer, it’s flexible, it’s conceptually simple, it works. Despite all that I find myself using Tailwind. I’m not a frontend/designer expert, Tailwind goes against what I believe makes good HTML, Tailwind is ugly to me, polluting classes with markup. It’s equivalent to the embedding inline styles anti pattern. However in an imperfect world it works surprisingly well for visual styling on large projects, with many teams and components and just as well in small single page sites. The perfectionist in me says it’s horrible, the I can’t be bothered with frontend design in me says it’s so much less effort and avoids styling conflicts from multiple style sheets/components and I don’t care if it’s ugly or against the ethos of good html.
- abathur 3y ago
  The discomfort is because html and css were misabstracted. They were designed for the old world of documents, where the idea of restyling a bunch of documents for a new letterhead (etc.) makes a lot of sense. They've been adapted for the world of interface design, but the separation of concerns doesn't make sense in that axis. It makes sense for the content of a document to be separate from it's style. It doesn't make as much sense to separate the structure of an interface from it's style. (In practice they are almost always tightly coupled.) Tailwind is flattening these back down into roughly one layer from the author's perspective, where they make sense for the design work. (I wrote a bit more about this perspective in https://t-ravis.com/post/doc/what_color_is_your_markup/ https://t-ravis.com/post/doc/what_color_is_your_markup/)
  - danShumway 3y ago
    I would strongly disagree with this, for two reasons. 1. Interfaces aren't special, the majority of application interfaces on my computer are just interactive documents, they're just styled to look like they're not. Outside of some specific examples (games, Blender, Krita, maps), I think very often if you can't sit down and describe an interface as pure text, something has gone wrong with your UX. And in fact, if you're interested in building genuinely accessible apps for low-vision users, it is a prerequisite that you be able to describe your interface using just text. Most native apps are just interactive documents and forms. 2. The need to change presentation depending on context has gone up over time, not down. There's this theory that documents used to need to be flexible, but now we're all using interfaces where the data we're displaying should be tightly coupled to the interface and it just doesn't make sense given that screen sizes are far more diverse today (HDPI scaling is still a problem on Linux), phone sizes are more diverse, we have people using apps in hands-free settings, they're getting tied into personal assistants, we have more awareness now of accessibility concerns, devices like the Steam Deck exist. Building polymorphic interfaces is more important today than it was 20 years ago when you could make 3 interfaces and just call it a day and assume you were supporting every device/control scheme. You didn't have people asking whether they could control your reader app with a gamecube controller. And there are only two ways to build good polymorphic interfaces -- redesign multiple versions of the same interface, which doesn't scale and is guaranteed to leave uncommon and under-represented devices behind, or dive really hard into semantic[0] interfaces where you describe more precisely what data is rather than just what things look like. The tight coupling of interfaces to presentation is usually bad for the end user and is usually unnecessary (in my opinion, based on the native desktop applications I commonly use). I often think that user interfaces would improve dramatically for everyone and our interfaces would be a lot easier to adapt to new computing interfaces and control schemes if we forced developers to build them with their monitors turned off, and then handed off the finished project to a separate team to make them look pretty. ---- I do agree with you on one point though: > HTML wasn't designed for my ~modern assumption about what the document is. It was designed to be the document HTML is at its best when it is not treated as a way to author interfaces, but rather as a render target in and of itself. A lot of design problems on the web stem from the fact that app developers view the pixels on the screen as their primary UX rather than as a secondary side-effect of their UX, which is HTML. And I guess also to be fair, there is a valid critique here about the HTML "color" representing a mix of concerns. In some ways, HTML is kind of a flawed example of what we're trying to do. HTML was one iteration towards this idea of having user-facing data-driven interfaces. It's not necessarily perfect, it's just that it hasn't been supplanted (yet). [0]: I understand you don't like the word (https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/ https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/), but it's the best one to use here.
shubhamjain 3y ago
I don't understand why it's an either/or between Tailwind vs using CSS classes. Tailwind is awesome. At the same time, no, repeating the same styles for links, buttons again and again isn't great. Code littered with hundreds of classes is plain ugly and makes it hard to read and work on. This[1] is a valid complaint about Tailwind. The < span > at the end has nearly 20+ classes. At some point, you should abstract some set of classes. In some cases, CSS selectors and other CSS feature will allow you to do what you want with far fewer lines of code. [1]: https://twitter.com/xirclebox/status/1673557143088242689 https://twitter.com/xirclebox/status/1673557143088242689
- Cyberdog 3y ago
  It's an either/or because once you start heading down the Tailwind/Bootstrap path, it pulls you out of the habit of using proper classes and such, and now you have fifty pages where some bit of text uses "text-xl" or whatever instead of a proper and descriptive class. You get into the habit of writing HTML with a bunch of styling directives in it, just like we did in the pre-CSS days.
  - shubhamjain 3y ago
    I do agree, it's easy to abandon classes altogether. It's also a bit concerning that newer devs are starting with Tailwind. At the same time, I think one should be able to notice that certain styling is just getting repeated everywhere and abstracting it out makes sense. What I actually like about Tailwind is not that you don't have to create classes at all, it's that you don't have to do it for things that don't need it. My old codebase was littered with hundreds of classes doing the same set of styling — padding, margins, flex-box stuff. That's the biggest thing Tailwind helps with.
    - Cyberdog 3y ago
      That may be an issue with inconsistent design elements on your site, then. Simplify, reuse as much as possible, simplify again, repeat.
  - 3y ago
thomasfromcdnjs 3y ago
I just have too much love for styled components. I love naming things, it really helps you think about abstractions and guides you to reusability and more minimal design systems. It probably depends where you are coming from, my day job generally involves building finicky complex UI's, Tailwind and other frameworks always just get in the way and look fugly by the end of implementation.
vanstan 3y ago
CSS is water and Tailwind is PRIME drink. Let's not dictate people what to drink. 90% of the time water is all you need.
- imilk 3y ago
  More like CSS is well water and Tailwind is a good quality water filter.
jraph 3y ago
As someone who is skeptical about Tailwind because I've learnt to separate the structure from the presentation (the old school way). It reads like the advantages listed in the article would apply if one used style="...." everywhere. Which does not sell it well to me. Then again the author says they needed to actually try Tailwind for it to "click". But then again, they are praising something without much long term insight, I'd be interested to have an opinion from someone who has maintained a project for one or two years, or more. Tailwind feels like Bootstrap to me: as someone who has written raw CSS for years, you need to learn a new vocabulary and map it to standard CSS. Which I don't feel the need for. I know CSS, and you kind of have to anyway even when using a CSS framework. With the extra disadvantage that you need to have a build pass so Tailwind can pick up the dynamic classes you used to build the corresponding CSS for you. But I really want to write this CSS myself and have meaningful class names, I feel like it helps me understand what's what when working on the structure. I can always inspect with the web developer tools if I want do understand what styles apply. I see the appeal of having some default design system applied to your thing and not having to write some style reset stuff when using a CSS framework like Bootstrap, but even for this I'm not sure about the benefit/drawback ratio. I work for a company whose product is somewhat trapped in an old version of bootstrap because it can be augmented with extensions, and not the old bootstrap version is part of the API, if you update it you break the API. I don't know.
- mock-possum 3y ago
  Man I am right there with you. It just feels like it’s giving up too much. It’s more enjoyable to write the CSS yourself.
- IlPeach 3y ago
  Same here. Have tried a few before moving my portfolio to Sveltekit last year, including Tailwind. And to be honest it does feel Bootstrappy as you said. The simplicity and flexibility you have in some of the functionality of CSS to really do whatever in terms of layouts is fantastic. The only thing I know for sure, as it's a current problem with the front-end development at work, is that majority of devs are not that experts in CSS and they have hardly spent any time working on raw CSS in their whole career. Which is where I can see the appeal of using Tailwind. Maybe.
Solvency 3y ago
All you need to know is this. Tailwind is beloved by Hacker News commenters with zero design sensibility or skill whatsoever, and typical zero front-end specialism as well. They may argue this, but then you only have to look at the projects they're using Tailwind on to understand.
- NayamAmarshe 3y ago
  All you need to know is, Tailwind is used by some of the best designers and websites in the world. https://www.openai.com/ https://www.openai.com/ https://www.shopify.com/ https://www.shopify.com/ https://www.netflix.com/tudum/top10/ https://www.netflix.com/tudum/top10/ https://www.theverge.com/ https://www.theverge.com/ https://www.loom.com/ https://www.loom.com/ https://githubnext.com/ https://githubnext.com/ https://planetscale.com/ https://planetscale.com/
- imilk 3y ago
  I would love to see the CSS files behind your amazing Tailwind-free designs and know how easily a new dev/designer can jump in and make meaningful non-breaking changes. Especially if any of those projects have touched more than one team over a few years.
- Takennickname 3y ago
  Sounds like its perfect for me. Finally we can get rid of pompous designers who all think that they're Johnny Ive.
toastal 3y ago
Meaningful class names were great. I could use them to reliably build filter lists for uBlock Origin and User Styles to fix bad design, but I can’t select on these classes at all.
inopinatus 3y ago
Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last document styling language anyone would ever need. Unfortunately following an incident with a broken Lisp machine, a liquid lunch, and an unlicensed particle accelerator, I became trapped in a parallel universe where the HTML ERB anointed CSS by mistake during a drunken night out in Oslo. The fundamental concept of CSS (best revealed by H.W.Lie's thesis IMO¹) was to create a rich and versatile and non-Turing-complete set of structural selectors in lieu of DSSSL's recursive logic, and to allow styles to overlay one another; two design choices that only by the application of gallons of irony can explain why most web pages are composed of a bunch of nested DIV elements with hashed IDs and overloaded semantic class attributes, and everyone compiles their assets into a static file. Consequently, all CSS is crap. Tailwind is (in my experience and opinion) the least crap and most productive approach yet. I switched over years ago and have no regrets. Adam Wathan is the hero we deserve. [1] https://www.wiumlie.no/2006/phd/css.pdf https://www.wiumlie.no/2006/phd/css.pdf
nailer 3y ago
> As I get deeper into my software engineering career I have realized an important aspect of what I consider "good" code is that it enables you to focus very tightly on the section you're working on without needing to jump around to other files (or even scroll down the same one.) Agreed. But this point (and the next point) mainly seems to be a workaround for React not including single file components. There’s very little reason to start new projects in React these days and while Svelte didn’t invent SFC (I think they came from Vue) your CSS is right there in the component file, automatically scoped to the component when you save.
jacknews 3y ago
I don't think tailwind is supposed to be used just as a sprinkling of css attributes throughout the html. I thought the idea was to simplify making css frameworks? Eg, it really is ugly when you have, let's say a <ul> and each <li> has the same bunch of tailwind styles - these should obviously be extracted into a 'widget-list' class or whatever.
aleksiy123 3y ago
I think where a lot of people get hung up on tailwind is they where taught Separation of Concerns. Where are tailwind takes the approach of Locality of Behaviour. https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/ A nice essay on this by the creator of htmx.
- imbnwa 3y ago
  So basically the web went astray with @media, otherwise we would've had presentation attributes? This is sorta underlines how XHTML would've been so valuable for namespacing layers of behavior like this from one another, satisfying the desire to scope the web authoring experience: namespace for attributes for declarative behavior, a la htmx; CSS where we don't expect to print the page; we already have this for math formulations, SVG; etc
wg0 3y ago
There's no turning back from the expressiveness of Typescript, brevity of Svelte, reusability/portability of Tailwind and simplicity of golang once you've tried them.
danShumway 3y ago
There are enough people who advocate for Tailwind that I can't dismiss them in good conscience, but if you put a gun to my head and forced me to give my honest opinion, I can't think of a single problem that Tailwind solves that isn't better solved by web components and scoped CSS, BEM, or a decent CSS-in-JS library. When I see articles praising Tailwind, they're almost always comparing it to the worst possible way to write CSS -- a mixture of arbitrary classnames that get reused across components and semantic styles that refer directly to HTML and use child selectors to target specific elements. Well yeah, if you compare Tailwind to that, it probably looks great. If you compare JQuery to building HTML templates in PHP using string concatenation, JQuery probably looks great too. Again, I can't dismiss it, the people advocating for it must know about these other solutions. I can't dismiss them. But I don't understand it. And the articles that are written about why it's good are entirely unpersuasive. They're talking about problems that I consider to be already solved. People advertise Tailwind by saying "we want the styles to be based on the component." Yeah, I want that too, but it sure looks Tailwind is a really inconvenient, cumbersome way to do that. You can scope CSS to components if you want to, that's not something that requires Tailwind.
- The5thElephant 3y ago
  Exactly. The moment you start working outside of the React bubble you begin to discover just how many of these problems are solved by things like Svelte/Vue's single-file components and a few decent editor extensions. I don't have to go hunt for a separate CSS file to see what is happening with my semantically named classes. I don't even have to scroll to find it in the same file, I can just option-click the class and see a mini-window showing the relevant styles, edit them inline, or jump to where they are in code. I can find out which classes are unused or where they are used. I get the best of both worlds. Additionally the moment you get into anything beyond basic layouts the readability of Tailwind drops from "a little frustrating" to "completely opaque". Start adding new CSS features like variables, wide-gamut colors, sub-grid, etc and your neat Tailwind classes start looking like abstract [ ] and letter soup. Tailwind has some really cool benefits like helping you stick to consistent tokens from your design system and being able to copy paste most HTML from one project to another and have it work, but those benefits simply do not outweigh the downsides I find when I am working in a real project I have to come back to edit and iterate on with multiple people who don't all know CSS well.
hu3 3y ago
Here's Rich Harris (creator of Svelte/SvelteKit) first impression about Tailwind: https://www.youtube.com/watch?v=0bog8-Ay7CU&t=12849s https://www.youtube.com/watch?v=0bog8-Ay7CU&t=12849s Timestamp in case link doen't work is 3h34m8s
imbnwa 3y ago
Tailwind, htmx, AlpineJS, etc all seem to suggest we took a wrong turn giving up on XHTML, because as it turned out, we actually did want the ability to refer to declarative attributes for distinct sets of browser behavior: styling with no real expectation of handling `@media print` in the case of tailwind (obviously you can but its likely not the dominant use case), IO and composite DOM mutation in the case of htmx and AlpineJS; etc. Moreover, XML namespacing allowed us to scope the web authoring experience, so that one could fluidly scale from the default case of document layout up to whatever desired levels of interactivity and the semantics to support that, all the while engaging with a minimum of JS. Being able to easily integrate new semantics in an opt-in way could've allow for faster innovation.
- mathgladiator 3y ago
  I've been playing with reactive data binding via my own library and platform and it's a joy to use (https://book.adama-platform.com/rxhtml/ref.html https://book.adama-platform.com/rxhtml/ref.html)
begoon 3y ago
The ugliness of vanilla CSS is in the absence of scopes, though it’s coming. I was a big fan of Tailwind, but after switching to mostly Svelte, where CSS is scoped by definition, I found that the vanilla CSS is not as nasty as I previously thought.

80 points by sebg 3y ago

I've been using Tailwind since its release. I think it is fantastic and I'm so grateful for it. We're also happy customers of TailwindUI. I just launched a new product and we could not have gotten to market as quickly without Tailwind.

kamikaz1k 3y ago

Agree with author and the quote...after trying it, it really was like drinking the kool aid

NayamAmarshe 3y ago

Tailwind is fantastic, changed the whole game for me. I've built all my projects with Tailwind and I'm never going back to writing all the UI in regular CSS or SASS. CSS is still needed of course, but the 95% Tailwind + 5% CSS rule makes my life easier and happier.

lawn 3y ago

Clearly there are lots of people who love Tailwind, but for me it really misses the mark. Yes, it's extremely ugly and unreadable when you have 10-20 classes. But worse, you have to repeat them in other components even if you only want to change a single one of them. And making changes to multiple components, good luck. Thanks but no thanks. I'll continue with my systems designed in css and sass.

akiselev 3y ago
I use a vscode extension [1] to fold all CSS classes. Really helps to clean up the ugliness when I'm not focused on styling. For components, I move the class names to an @apply directive in a css rule [1] https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold https://marketplace.visualstudio.com/items?itemName=stivo.ta...
burlesona 3y ago
Tailwind makes a lot of sense for people who are doing componentized UI frameworks where they never write the same markup twice. But if you're actually writing markup in the more "traditional way" where you repeatedly mark semantic elements with classes in order to make them have a certain look and feel (and let CSS do the heavy lifting) then Tailwind is a mess. In my experience that distinction is the most of the difference between enjoying Tailwind and not.
- diob 3y ago
  I don't get the reasoning, you could do the same with Tailwind, just make a mega class with all your "css". Nobody says you can't, although personally I don't do this. <div className={`${variableWithMultipleTailwindClasses}`} />
kebsup 3y ago
You can still use global styles with tailwind. After you style components like buttons, inputs and cards globally, I've found surprisingly low amount of repetition.

spaceman_2020 3y ago

I started teaching myself to code 8 months back. I was used to HTML/CSS so I used styled components initially. Someone persuaded me to give Tailwind a shot. It was a little rough start but I now really appreciate the pre-built styles, the intuitive naming schemes, and the confidence that it will just “work” across devices.

cutler 3y ago

[flagged]

siquick 3y ago

Tailwind might as well be CSS now as far as I’m concerned. It’s been 3 years of greatness.

c_s_guy 3y ago

I've never understood why public opinion is so polarizing on Tailwind. Could someone with experience in both camps help me understand the tradeoffs, and offer any guidance on whether Tailwind would (not) be a good fit?

Cyberdog 3y ago
Note that I'm a Tailwind hater. Tailwind and similar frameworks divorce the concept of a semantic web we as a society have been building towards for decades. It works against the idea that you mark up areas of your code with descriptive labels like "header" and then put the code describing how the header should appear in another easily-editable file, and instead encourages you to use generic style descriptors to describe how the header area of your site should appear in the HTML itself. This is how we built web sites before CSS was widely adopted and, though it was "easier" to do things like `<p color="#999999">` in HTML 3 rather than separate the code from the appearance markup, it was generally considered to be a really bad idea. But Tailwind and the like drag us back in that direction.
- unmole 3y ago
  > concept of a semantic web we as a society have been building towards for decades This makes no sense to me. Semantic Web was a mostly failed attempt at making web pages readable to machines. Your actual complaint seems to be Separation of Concerns. Nevertheless, that is something that is only of interest to a subset of developers. Society doesn't care.
  - Cyberdog 3y ago
    How did it fail? Are you speaking just in terms of its slow adoption?
    - unmole 3y ago
      I'm speaking in terms of no adoption.

BFLpL0QNek 3y ago

The article name describes Tailwind exactly for me. I personally am a fan of schematic html/css. I remember the days off CSS Zen Garden, with well marked up html you can change the visual look completely by swapping out the style sheet. There’s a nice decoupling layer, it’s flexible, it’s conceptually simple, it works. Despite all that I find myself using Tailwind. I’m not a frontend/designer expert, Tailwind goes against what I believe makes good HTML, Tailwind is ugly to me, polluting classes with markup. It’s equivalent to the embedding inline styles anti pattern. However in an imperfect world it works surprisingly well for visual styling on large projects, with many teams and components and just as well in small single page sites. The perfectionist in me says it’s horrible, the I can’t be bothered with frontend design in me says it’s so much less effort and avoids styling conflicts from multiple style sheets/components and I don’t care if it’s ugly or against the ethos of good html.

abathur 3y ago
The discomfort is because html and css were misabstracted. They were designed for the old world of documents, where the idea of restyling a bunch of documents for a new letterhead (etc.) makes a lot of sense. They've been adapted for the world of interface design, but the separation of concerns doesn't make sense in that axis. It makes sense for the content of a document to be separate from it's style. It doesn't make as much sense to separate the structure of an interface from it's style. (In practice they are almost always tightly coupled.) Tailwind is flattening these back down into roughly one layer from the author's perspective, where they make sense for the design work. (I wrote a bit more about this perspective in https://t-ravis.com/post/doc/what_color_is_your_markup/ https://t-ravis.com/post/doc/what_color_is_your_markup/)
- danShumway 3y ago
  I would strongly disagree with this, for two reasons. 1. Interfaces aren't special, the majority of application interfaces on my computer are just interactive documents, they're just styled to look like they're not. Outside of some specific examples (games, Blender, Krita, maps), I think very often if you can't sit down and describe an interface as pure text, something has gone wrong with your UX. And in fact, if you're interested in building genuinely accessible apps for low-vision users, it is a prerequisite that you be able to describe your interface using just text. Most native apps are just interactive documents and forms. 2. The need to change presentation depending on context has gone up over time, not down. There's this theory that documents used to need to be flexible, but now we're all using interfaces where the data we're displaying should be tightly coupled to the interface and it just doesn't make sense given that screen sizes are far more diverse today (HDPI scaling is still a problem on Linux), phone sizes are more diverse, we have people using apps in hands-free settings, they're getting tied into personal assistants, we have more awareness now of accessibility concerns, devices like the Steam Deck exist. Building polymorphic interfaces is more important today than it was 20 years ago when you could make 3 interfaces and just call it a day and assume you were supporting every device/control scheme. You didn't have people asking whether they could control your reader app with a gamecube controller. And there are only two ways to build good polymorphic interfaces -- redesign multiple versions of the same interface, which doesn't scale and is guaranteed to leave uncommon and under-represented devices behind, or dive really hard into semantic[0] interfaces where you describe more precisely what data is rather than just what things look like. The tight coupling of interfaces to presentation is usually bad for the end user and is usually unnecessary (in my opinion, based on the native desktop applications I commonly use). I often think that user interfaces would improve dramatically for everyone and our interfaces would be a lot easier to adapt to new computing interfaces and control schemes if we forced developers to build them with their monitors turned off, and then handed off the finished project to a separate team to make them look pretty. ---- I do agree with you on one point though: > HTML wasn't designed for my ~modern assumption about what the document is. It was designed to be the document HTML is at its best when it is not treated as a way to author interfaces, but rather as a render target in and of itself. A lot of design problems on the web stem from the fact that app developers view the pixels on the screen as their primary UX rather than as a secondary side-effect of their UX, which is HTML. And I guess also to be fair, there is a valid critique here about the HTML "color" representing a mix of concerns. In some ways, HTML is kind of a flawed example of what we're trying to do. HTML was one iteration towards this idea of having user-facing data-driven interfaces. It's not necessarily perfect, it's just that it hasn't been supplanted (yet). [0]: I understand you don't like the word (https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/ https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/), but it's the best one to use here.

shubhamjain 3y ago

I don't understand why it's an either/or between Tailwind vs using CSS classes. Tailwind is awesome. At the same time, no, repeating the same styles for links, buttons again and again isn't great. Code littered with hundreds of classes is plain ugly and makes it hard to read and work on. This[1] is a valid complaint about Tailwind. The < span > at the end has nearly 20+ classes. At some point, you should abstract some set of classes. In some cases, CSS selectors and other CSS feature will allow you to do what you want with far fewer lines of code. [1]: https://twitter.com/xirclebox/status/1673557143088242689 https://twitter.com/xirclebox/status/1673557143088242689

Cyberdog 3y ago
It's an either/or because once you start heading down the Tailwind/Bootstrap path, it pulls you out of the habit of using proper classes and such, and now you have fifty pages where some bit of text uses "text-xl" or whatever instead of a proper and descriptive class. You get into the habit of writing HTML with a bunch of styling directives in it, just like we did in the pre-CSS days.
- shubhamjain 3y ago
  I do agree, it's easy to abandon classes altogether. It's also a bit concerning that newer devs are starting with Tailwind. At the same time, I think one should be able to notice that certain styling is just getting repeated everywhere and abstracting it out makes sense. What I actually like about Tailwind is not that you don't have to create classes at all, it's that you don't have to do it for things that don't need it. My old codebase was littered with hundreds of classes doing the same set of styling — padding, margins, flex-box stuff. That's the biggest thing Tailwind helps with.
  - Cyberdog 3y ago
    That may be an issue with inconsistent design elements on your site, then. Simplify, reuse as much as possible, simplify again, repeat.
- 3y ago

thomasfromcdnjs 3y ago

I just have too much love for styled components. I love naming things, it really helps you think about abstractions and guides you to reusability and more minimal design systems. It probably depends where you are coming from, my day job generally involves building finicky complex UI's, Tailwind and other frameworks always just get in the way and look fugly by the end of implementation.

vanstan 3y ago

CSS is water and Tailwind is PRIME drink. Let's not dictate people what to drink. 90% of the time water is all you need.

imilk 3y ago
More like CSS is well water and Tailwind is a good quality water filter.

jraph 3y ago

As someone who is skeptical about Tailwind because I've learnt to separate the structure from the presentation (the old school way). It reads like the advantages listed in the article would apply if one used style="...." everywhere. Which does not sell it well to me. Then again the author says they needed to actually try Tailwind for it to "click". But then again, they are praising something without much long term insight, I'd be interested to have an opinion from someone who has maintained a project for one or two years, or more. Tailwind feels like Bootstrap to me: as someone who has written raw CSS for years, you need to learn a new vocabulary and map it to standard CSS. Which I don't feel the need for. I know CSS, and you kind of have to anyway even when using a CSS framework. With the extra disadvantage that you need to have a build pass so Tailwind can pick up the dynamic classes you used to build the corresponding CSS for you. But I really want to write this CSS myself and have meaningful class names, I feel like it helps me understand what's what when working on the structure. I can always inspect with the web developer tools if I want do understand what styles apply. I see the appeal of having some default design system applied to your thing and not having to write some style reset stuff when using a CSS framework like Bootstrap, but even for this I'm not sure about the benefit/drawback ratio. I work for a company whose product is somewhat trapped in an old version of bootstrap because it can be augmented with extensions, and not the old bootstrap version is part of the API, if you update it you break the API. I don't know.

mock-possum 3y ago
Man I am right there with you. It just feels like it’s giving up too much. It’s more enjoyable to write the CSS yourself.
IlPeach 3y ago
Same here. Have tried a few before moving my portfolio to Sveltekit last year, including Tailwind. And to be honest it does feel Bootstrappy as you said. The simplicity and flexibility you have in some of the functionality of CSS to really do whatever in terms of layouts is fantastic. The only thing I know for sure, as it's a current problem with the front-end development at work, is that majority of devs are not that experts in CSS and they have hardly spent any time working on raw CSS in their whole career. Which is where I can see the appeal of using Tailwind. Maybe.

Solvency 3y ago

All you need to know is this. Tailwind is beloved by Hacker News commenters with zero design sensibility or skill whatsoever, and typical zero front-end specialism as well. They may argue this, but then you only have to look at the projects they're using Tailwind on to understand.

NayamAmarshe 3y ago
All you need to know is, Tailwind is used by some of the best designers and websites in the world. https://www.openai.com/ https://www.openai.com/ https://www.shopify.com/ https://www.shopify.com/ https://www.netflix.com/tudum/top10/ https://www.netflix.com/tudum/top10/ https://www.theverge.com/ https://www.theverge.com/ https://www.loom.com/ https://www.loom.com/ https://githubnext.com/ https://githubnext.com/ https://planetscale.com/ https://planetscale.com/
imilk 3y ago
I would love to see the CSS files behind your amazing Tailwind-free designs and know how easily a new dev/designer can jump in and make meaningful non-breaking changes. Especially if any of those projects have touched more than one team over a few years.
Takennickname 3y ago
Sounds like its perfect for me. Finally we can get rid of pompous designers who all think that they're Johnny Ive.

toastal 3y ago

Meaningful class names were great. I could use them to reliably build filter lists for uBlock Origin and User Styles to fix bad design, but I can’t select on these classes at all.

inopinatus 3y ago

Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last document styling language anyone would ever need. Unfortunately following an incident with a broken Lisp machine, a liquid lunch, and an unlicensed particle accelerator, I became trapped in a parallel universe where the HTML ERB anointed CSS by mistake during a drunken night out in Oslo. The fundamental concept of CSS (best revealed by H.W.Lie's thesis IMO¹) was to create a rich and versatile and non-Turing-complete set of structural selectors in lieu of DSSSL's recursive logic, and to allow styles to overlay one another; two design choices that only by the application of gallons of irony can explain why most web pages are composed of a bunch of nested DIV elements with hashed IDs and overloaded semantic class attributes, and everyone compiles their assets into a static file. Consequently, all CSS is crap. Tailwind is (in my experience and opinion) the least crap and most productive approach yet. I switched over years ago and have no regrets. Adam Wathan is the hero we deserve. [1] https://www.wiumlie.no/2006/phd/css.pdf https://www.wiumlie.no/2006/phd/css.pdf

nailer 3y ago

> As I get deeper into my software engineering career I have realized an important aspect of what I consider "good" code is that it enables you to focus very tightly on the section you're working on without needing to jump around to other files (or even scroll down the same one.) Agreed. But this point (and the next point) mainly seems to be a workaround for React not including single file components. There’s very little reason to start new projects in React these days and while Svelte didn’t invent SFC (I think they came from Vue) your CSS is right there in the component file, automatically scoped to the component when you save.

jacknews 3y ago

I don't think tailwind is supposed to be used just as a sprinkling of css attributes throughout the html. I thought the idea was to simplify making css frameworks? Eg, it really is ugly when you have, let's say a <ul> and each <li> has the same bunch of tailwind styles - these should obviously be extracted into a 'widget-list' class or whatever.

aleksiy123 3y ago

I think where a lot of people get hung up on tailwind is they where taught Separation of Concerns. Where are tailwind takes the approach of Locality of Behaviour. https://htmx.org/essays/locality-of-behaviour/ https://htmx.org/essays/locality-of-behaviour/ A nice essay on this by the creator of htmx.

imbnwa 3y ago
So basically the web went astray with @media, otherwise we would've had presentation attributes? This is sorta underlines how XHTML would've been so valuable for namespacing layers of behavior like this from one another, satisfying the desire to scope the web authoring experience: namespace for attributes for declarative behavior, a la htmx; CSS where we don't expect to print the page; we already have this for math formulations, SVG; etc

wg0 3y ago

There's no turning back from the expressiveness of Typescript, brevity of Svelte, reusability/portability of Tailwind and simplicity of golang once you've tried them.

danShumway 3y ago

There are enough people who advocate for Tailwind that I can't dismiss them in good conscience, but if you put a gun to my head and forced me to give my honest opinion, I can't think of a single problem that Tailwind solves that isn't better solved by web components and scoped CSS, BEM, or a decent CSS-in-JS library. When I see articles praising Tailwind, they're almost always comparing it to the worst possible way to write CSS -- a mixture of arbitrary classnames that get reused across components and semantic styles that refer directly to HTML and use child selectors to target specific elements. Well yeah, if you compare Tailwind to that, it probably looks great. If you compare JQuery to building HTML templates in PHP using string concatenation, JQuery probably looks great too. Again, I can't dismiss it, the people advocating for it must know about these other solutions. I can't dismiss them. But I don't understand it. And the articles that are written about why it's good are entirely unpersuasive. They're talking about problems that I consider to be already solved. People advertise Tailwind by saying "we want the styles to be based on the component." Yeah, I want that too, but it sure looks Tailwind is a really inconvenient, cumbersome way to do that. You can scope CSS to components if you want to, that's not something that requires Tailwind.

The5thElephant 3y ago
Exactly. The moment you start working outside of the React bubble you begin to discover just how many of these problems are solved by things like Svelte/Vue's single-file components and a few decent editor extensions. I don't have to go hunt for a separate CSS file to see what is happening with my semantically named classes. I don't even have to scroll to find it in the same file, I can just option-click the class and see a mini-window showing the relevant styles, edit them inline, or jump to where they are in code. I can find out which classes are unused or where they are used. I get the best of both worlds. Additionally the moment you get into anything beyond basic layouts the readability of Tailwind drops from "a little frustrating" to "completely opaque". Start adding new CSS features like variables, wide-gamut colors, sub-grid, etc and your neat Tailwind classes start looking like abstract [ ] and letter soup. Tailwind has some really cool benefits like helping you stick to consistent tokens from your design system and being able to copy paste most HTML from one project to another and have it work, but those benefits simply do not outweigh the downsides I find when I am working in a real project I have to come back to edit and iterate on with multiple people who don't all know CSS well.

hu3 3y ago

Here's Rich Harris (creator of Svelte/SvelteKit) first impression about Tailwind: https://www.youtube.com/watch?v=0bog8-Ay7CU&t=12849s https://www.youtube.com/watch?v=0bog8-Ay7CU&t=12849s Timestamp in case link doen't work is 3h34m8s

imbnwa 3y ago

Tailwind, htmx, AlpineJS, etc all seem to suggest we took a wrong turn giving up on XHTML, because as it turned out, we actually did want the ability to refer to declarative attributes for distinct sets of browser behavior: styling with no real expectation of handling `@media print` in the case of tailwind (obviously you can but its likely not the dominant use case), IO and composite DOM mutation in the case of htmx and AlpineJS; etc. Moreover, XML namespacing allowed us to scope the web authoring experience, so that one could fluidly scale from the default case of document layout up to whatever desired levels of interactivity and the semantics to support that, all the while engaging with a minimum of JS. Being able to easily integrate new semantics in an opt-in way could've allow for faster innovation.

mathgladiator 3y ago
I've been playing with reactive data binding via my own library and platform and it's a joy to use (https://book.adama-platform.com/rxhtml/ref.html https://book.adama-platform.com/rxhtml/ref.html)

begoon 3y ago

The ugliness of vanilla CSS is in the absence of scopes, though it’s coming. I was a big fan of Tailwind, but after switching to mostly Svelte, where CSS is scoped by definition, I found that the vanilla CSS is not as nasty as I previously thought.