5 ms·

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to

As a once-strident critic of Tailwind for its many failings and incompatibilities with the state of the actually-modern "vanilla" web art, I am very pleased to see the huge strides they've made with v4. Being able to access the Tailwind theme through native CSS variables (they even have an example in the docs of a button component written in native CSS in an external stylesheet using native variables! Oh happy day!) is absolutely massive, and being able to use a CSS-only config is equally amazing. Finally, Tailwind feels more like it's a utility (ironic, since its claim to fame is utility classes!) which you can add to any project, rather than some bizarro "viral" framework that wants to eat sensible architectures and lives in its own JavaScript-y silo. Perhaps all the criticism over the years actually had an effect. Or maybe they finally arrived at good conclusions on their own. Either way, I suspect many of the pro/anti-Tailwind arguments are no longer relevant, and that's a Very Good Thing. Now we can get down to business and ship product.

tipiirai 2y ago
> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * Second, Tailwind makes it impossible for me to participate in the actual craft. Design decisions get buried in React components with cryptic expressions like `flex items-center shadow-lg p-6 hover:bg-gray-50 dark:bg-gray-800 py-[calc(theme(spacing[2.5])-1px)]`. This might make sense for JavaScript engineers, but blocks/makes it hard for systematic design. Instead of expressing precise mathematical relationships through CSS, we're essentially writing inline styles with better ergonomics.
- skydhash 2y ago
  Maybe Tailwind is useful for bigger projects, but I tend to prefer component based class instead. The biggest DX for CSS is using the web inspector and directly modifying the DOM, then copying the adjusted values to the text editor. For a much serious project, I go with the balsamiq -> figma route to create an actual design system.
  - tambourine_man 2y ago
    You can allow the inspector to access the filesystem and modify the files without having to copy/paste for even better DX.
- Foreignborn 2y ago
  Tailwind has solved a lot of problems. And this is coming from someone who doesn't use it half the time. Some thoughts about this topic, not necessarily in disagreement: - Designers seldom think in the way you describe (explicit computer-readable rules, systems of design). A lot of designers are coming from crafts that are more implicit. It doesn't surprise me design business logic is not the topic of conversation. - You need to update your tailwind classes to reflect your design business logic. Don't do "bg-gray", do "on-surface-emphasis" or whatever business logic. This is just a simple config change. - You probably brought up modular scale as just one example, but modular type has become near myopic dogma of frontend engineers who haven't had any typesetting experience. A scale of 1.25 vs 1.5 is so in the weeds as to be useless. There are so many alternative ways to set type (e.g. take lessons from CJK typesetting) or innovate typography on the web (e.g. build your own leading-trim implementation!).
  - tipiirai 2y ago
    I'm a designer, so I absolutely think in terms of design systems where typography is just one part of the puzzle. There are, of course, many ways to set type — but the point was: no Tailwind engineer talks about typographic scales in the first place. Systematic thinking is absent, which is naturally built in CSS.
    - threatofrain 2y ago
      I'm kind of surprised why this is even relevant to you. The designers I know work in Figma. The designer and the engineer collaborate to make sure the design isn't too hard to implement, but other than that the designer shouldn't care about whether developers are using Tailwind, StyleX, Sass, vanilla, or whatever. I hardly expect a designer to take responsibility for something as transient and idiosyncratic as "oh, but this is hard in Tailwind."
      - tipiirai 2y ago
        I'm (not) surprised typographic scales are non-relevant for Tailwind developers
- d1sxeyes 2y ago
  No one cares what your typography ratio is if you can’t get it in front of a user quickly enough (dead code elimination), reliably enough (type safe), or cost effectively enough (i.e. if you have to pay for more developer time to implement the same work). Tailwind is a tool for craftspeople, not artists. It democratises design by making it simpler. For folks that are really good designers, they should be happy that they can up their prices knowing that customers are paying for their expert eye, rather than just the basics again and again.
  - tipiirai 2y ago
    > Type safe typography ratio Please explain how this is better than expressing typographic scales with CSS variables and calc()?
    - d1sxeyes 2y ago
      You're using a right angle bracket there like I said that. I didn't. I would find it difficult to explain, especially given that this is exactly what Tailwind does: https://tailwindcss.com/docs/font-size https://tailwindcss.com/docs/font-size.
      - Ghoelian 2y ago
        > No one cares what your typography ratio is if you can’t get it in front of a user [...] reliably enough (type safe) i mean it's not exactly what you said, but c'mon, that's obviously what they meant.
        d1sxeyes 2y ago
        Ok fair enough. I was actually talking about the whole of Tailwind rather than just the typography ratios, but I can see how I could be understood in that way. My mistake. Either way, Tailwind works in exactly the way OP describes as their counter example.
  - threatofrain 2y ago
- deleted 2y ago
  [deleted]
- lenkite 2y ago
  Man their very playground at https://play.tailwindcss.com/ https://play.tailwindcss.com/ gives this unreadable crap (sorry for swearing) for the very first `div` on the first line: relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10 How can anyone prefer this gobbledygook over a nice CSS class declaration with line-separated standard CSS properties ? How can one even maintain this ? Maybe the modern generation of web developers have IQ 200 and 20/20 vision with eidetic memory and I should just put myself to pasture.
  - orf 2y ago
    Terrible take. Take a guess at what “dark:bg-gray-950”, “bg-white” or “min-h-screen” means. You get them from context. Imagine if you put a little bit of effort into learning Tailwind. You’d get the more complex declarations as well. As to why it’s better than a class declaration, a lot has been written about using atomic, composable utility classes over reams of “write-once” class declarations.
    - lenkite 2y ago
      I do not disagree that there are one or two recognizable elements in that encoded line-noise. Not sure what is the "terrible take" about it - if you take a poll, most would agree that it requires far too much eye-strain to read, far too much cognitive burden to parse, decode and mentally map to concepts. Its like deciding to code your entire your app using regexes - all in long single lines without comments.
  - thiht 2y ago
    Because your not thinking of styles practically. You don't review style declarations, you review the rendered page/component. You see with your eyes that a component has the wrong border color, and AFTER THAT you go to your component code, find the border color declaration (if any), and update it/add it. Sometimes you'll even inspect the element in browser, and find the faulty class directly, making it even easier to target in code. The Tailwind classes are "unreadable crap", that's true, but it's not a problem because you don't "read" it, no one does. You roughly parse it and edit it.
4m1rk 2y ago
I just want the color palette of the Tailwind CSS.
- arielcostas 2y ago
  Their palette is really neat. I always check it out when I need colour inspiration, especially for "cold greys" and other "state" colours (green for success, red for error, yellow for warning...).
- agos 2y ago
  yeah, the palette is neat. My main gripe with Tailwind is that it blends a set of design tokens (which I like) with a technology to apply them (which I don't like)
  - dbbk 2y ago
    Just copy and paste them out?
    - georg-stone 2y ago
      tailwindcolor.com is good for that
      - hbroadbent 2y ago
        I've also built https://tailcolors.com https://tailcolors.com which you might also like!
  - xigoi 2y ago
    Maybe check out Open Props? https://open-props.style/ https://open-props.style/
    - agos 2y ago
      I've seen that and it's a neat concept but unfortunately everything about that project looks hideous, so I'm not very keen on adopting it
sibeliuss 2y ago
I'm still a critic in terms of actually using it, but what I find amazing about tailwind is how amenable it is to AI-generated workflows. It seriously works _so good_. Anything can be expressed, and systematically. There's something amazingly useful there.
- esperent 2y ago
  > what I find amazing about tailwind is how amenable it is to AI-generated workflows It's highly amenable to human workflows as well. Of course, humans are more disparate than AIs so it doesn't suit all humans - no tool can. But it sure does seem like a majority of humans web developers like it.
- ebiester 2y ago
  So, I wonder how AI is going to work with the new upgrade. Are teams going to delay upgrading until there is proper Claude support, for example?
  - thangngoc89 2y ago
    Should work well since there aren’t any removal of old features and classes.
- bythreads 2y ago
  Its horrible, annoying and gets in the way

tipiirai 2y ago

> I suspect many of the pro/anti-Tailwind arguments are no longer relevant I feel there are two issues with Tailwind for me as a designer / design engineer. * First, JavaScript/Tailwind engineers have hijacked the conversation on design. Instead of "utility-first," "dead code elimination," and "type-safe CSS" I focus more on desing systems. Whether to use Perfect Fifth or Perfect Fourth in typography for example. * Second, Tailwind makes it impossible for me to participate in the actual craft. Design decisions get buried in React components with cryptic expressions like `flex items-center shadow-lg p-6 hover:bg-gray-50 dark:bg-gray-800 py-[calc(theme(spacing[2.5])-1px)]`. This might make sense for JavaScript engineers, but blocks/makes it hard for systematic design. Instead of expressing precise mathematical relationships through CSS, we're essentially writing inline styles with better ergonomics.

skydhash 2y ago
Maybe Tailwind is useful for bigger projects, but I tend to prefer component based class instead. The biggest DX for CSS is using the web inspector and directly modifying the DOM, then copying the adjusted values to the text editor. For a much serious project, I go with the balsamiq -> figma route to create an actual design system.
- tambourine_man 2y ago
  You can allow the inspector to access the filesystem and modify the files without having to copy/paste for even better DX.
Foreignborn 2y ago
Tailwind has solved a lot of problems. And this is coming from someone who doesn't use it half the time. Some thoughts about this topic, not necessarily in disagreement: - Designers seldom think in the way you describe (explicit computer-readable rules, systems of design). A lot of designers are coming from crafts that are more implicit. It doesn't surprise me design business logic is not the topic of conversation. - You need to update your tailwind classes to reflect your design business logic. Don't do "bg-gray", do "on-surface-emphasis" or whatever business logic. This is just a simple config change. - You probably brought up modular scale as just one example, but modular type has become near myopic dogma of frontend engineers who haven't had any typesetting experience. A scale of 1.25 vs 1.5 is so in the weeds as to be useless. There are so many alternative ways to set type (e.g. take lessons from CJK typesetting) or innovate typography on the web (e.g. build your own leading-trim implementation!).
- tipiirai 2y ago
  I'm a designer, so I absolutely think in terms of design systems where typography is just one part of the puzzle. There are, of course, many ways to set type — but the point was: no Tailwind engineer talks about typographic scales in the first place. Systematic thinking is absent, which is naturally built in CSS.
  - threatofrain 2y ago
    I'm kind of surprised why this is even relevant to you. The designers I know work in Figma. The designer and the engineer collaborate to make sure the design isn't too hard to implement, but other than that the designer shouldn't care about whether developers are using Tailwind, StyleX, Sass, vanilla, or whatever. I hardly expect a designer to take responsibility for something as transient and idiosyncratic as "oh, but this is hard in Tailwind."
    - tipiirai 2y ago
      I'm (not) surprised typographic scales are non-relevant for Tailwind developers
d1sxeyes 2y ago
No one cares what your typography ratio is if you can’t get it in front of a user quickly enough (dead code elimination), reliably enough (type safe), or cost effectively enough (i.e. if you have to pay for more developer time to implement the same work). Tailwind is a tool for craftspeople, not artists. It democratises design by making it simpler. For folks that are really good designers, they should be happy that they can up their prices knowing that customers are paying for their expert eye, rather than just the basics again and again.
- tipiirai 2y ago
  > Type safe typography ratio Please explain how this is better than expressing typographic scales with CSS variables and calc()?
  - d1sxeyes 2y ago
    You're using a right angle bracket there like I said that. I didn't. I would find it difficult to explain, especially given that this is exactly what Tailwind does: https://tailwindcss.com/docs/font-size https://tailwindcss.com/docs/font-size.
    - Ghoelian 2y ago
      > No one cares what your typography ratio is if you can’t get it in front of a user [...] reliably enough (type safe) i mean it's not exactly what you said, but c'mon, that's obviously what they meant.
      - d1sxeyes 2y ago
        Ok fair enough. I was actually talking about the whole of Tailwind rather than just the typography ratios, but I can see how I could be understood in that way. My mistake. Either way, Tailwind works in exactly the way OP describes as their counter example.
- threatofrain 2y ago
deleted 2y ago
[deleted]
lenkite 2y ago
Man their very playground at https://play.tailwindcss.com/ https://play.tailwindcss.com/ gives this unreadable crap (sorry for swearing) for the very first `div` on the first line: relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10 How can anyone prefer this gobbledygook over a nice CSS class declaration with line-separated standard CSS properties ? How can one even maintain this ? Maybe the modern generation of web developers have IQ 200 and 20/20 vision with eidetic memory and I should just put myself to pasture.
- orf 2y ago
  Terrible take. Take a guess at what “dark:bg-gray-950”, “bg-white” or “min-h-screen” means. You get them from context. Imagine if you put a little bit of effort into learning Tailwind. You’d get the more complex declarations as well. As to why it’s better than a class declaration, a lot has been written about using atomic, composable utility classes over reams of “write-once” class declarations.
  - lenkite 2y ago
    I do not disagree that there are one or two recognizable elements in that encoded line-noise. Not sure what is the "terrible take" about it - if you take a poll, most would agree that it requires far too much eye-strain to read, far too much cognitive burden to parse, decode and mentally map to concepts. Its like deciding to code your entire your app using regexes - all in long single lines without comments.
- thiht 2y ago
  Because your not thinking of styles practically. You don't review style declarations, you review the rendered page/component. You see with your eyes that a component has the wrong border color, and AFTER THAT you go to your component code, find the border color declaration (if any), and update it/add it. Sometimes you'll even inspect the element in browser, and find the faulty class directly, making it even easier to target in code. The Tailwind classes are "unreadable crap", that's true, but it's not a problem because you don't "read" it, no one does. You roughly parse it and edit it.

4m1rk 2y ago

I just want the color palette of the Tailwind CSS.

arielcostas 2y ago
Their palette is really neat. I always check it out when I need colour inspiration, especially for "cold greys" and other "state" colours (green for success, red for error, yellow for warning...).
agos 2y ago
yeah, the palette is neat. My main gripe with Tailwind is that it blends a set of design tokens (which I like) with a technology to apply them (which I don't like)
- dbbk 2y ago
  Just copy and paste them out?
  - georg-stone 2y ago
    tailwindcolor.com is good for that
    - hbroadbent 2y ago
      I've also built https://tailcolors.com https://tailcolors.com which you might also like!
- xigoi 2y ago
  Maybe check out Open Props? https://open-props.style/ https://open-props.style/
  - agos 2y ago
    I've seen that and it's a neat concept but unfortunately everything about that project looks hideous, so I'm not very keen on adopting it

sibeliuss 2y ago

I'm still a critic in terms of actually using it, but what I find amazing about tailwind is how amenable it is to AI-generated workflows. It seriously works _so good_. Anything can be expressed, and systematically. There's something amazingly useful there.

esperent 2y ago
> what I find amazing about tailwind is how amenable it is to AI-generated workflows It's highly amenable to human workflows as well. Of course, humans are more disparate than AIs so it doesn't suit all humans - no tool can. But it sure does seem like a majority of humans web developers like it.
ebiester 2y ago
So, I wonder how AI is going to work with the new upgrade. Are teams going to delay upgrading until there is proper Claude support, for example?
- thangngoc89 2y ago
  Should work well since there aren’t any removal of old features and classes.
bythreads 2y ago
Its horrible, annoying and gets in the way