9 ms·

I never got the point of Tailwind: having an element with utility classnames on it that each add one CSS rule, like class="flex flex-wrap" doesn't seem any bett

I never got the point of Tailwind: having an element with utility classnames on it that each add one CSS rule, like class="flex flex-wrap" doesn't seem any better than just having the equivalent inline styles on it. Sure, the Tailwind utility classes are shorter, but the abstraction doesn't simplify anything. It's just some set of aliases you'll need to have memorized, and it's just moving the one-off combining of styles from the inline style property to the class property. It seems like something built to superficially follow the common wisdom of avoiding overusing inline styles. I want to echo the author's recommendation of styled-jsx. I've been using it with React for a few years now and love it. Like Tailwind, the styling is conveniently co-located with your elements, but it's just regular CSS properties with their full power instead of a set of aliases crammed into the class property. It also encapsulates the styles to the component's own elements by default, which is very good at encouraging making encapsulated components. The codebase I'm working on used to have a mess of CSS files, and CSS files for various screens often messed with the internal styling of common components used within the screen which would regularly cause us surprises whenever we updated those common components without realizing how they were abused across the application. Now that we're using styled-jsx, proper component-level encapsulation is enforced by default, and it really helps guide us toward making the components themselves be responsible for their own styling needs, which keeps things much more understandable and more local with less "spooky action at a distance" (external styles modifying the component's internals).

splatzone 6y ago
In my experience, the real convenience of Tailwind over inline CSS is using all the variant classes (https://tailwindcss.com/docs/configuring-variants https://tailwindcss.com/docs/configuring-variants) like hover:font-bold, md:w-full, group-hover:text-gray-500 etc to compose your styles. It's not possible to use pseudo classes like :hover in inline CSS. I've also found the tailwind.config.js very useful - you can load it up with all your custom colours and fonts. It's much easier to refer to text-primary (for your primary brand colour) than remembering a hex code and pasting it all over your markup :)
- robin_reala 6y ago
  CSS custom properties do that natively though.
  - splatzone 6y ago
    That's true, but not for media queries or pseudo selectors. I suppose with CSS custom properties it would work something like this (please correct me if you know a terser way to use defined colours and weights): <span style="color: var(--color-primary); font-weight: var(--weight-extrabold);">my text in primary color and extrabold</span> I believe Tailwind's syntax is still far terser and more manageable: <span class="text-primary font-extrabold">my text in primary color and extrabold</span> When you have lots and lots of styling this quickly becomes important
    - robin_reala 6y ago
      OK, but my assumption was that this syntax was proposed as an incentive to use Tailwind, rather than trying to cram custom properties into style attributes. If I’m going to use custom properties it would be in a way that plays to CSS’s strengths.
- andrei_says_ 6y ago
  In my latest project I imported tailwind’s colors into a map and added a function to retrieve them. My scss looks like this: .card { color: c(gray-700); } Same for font sizes, font family definitions, screen sizes. I like having to remember less stuff, within my scss definitions.
ratww 6y ago
> class="flex flex-wrap" doesn't seem any better than just having the equivalent inline styles on it It is better than inline styles, though. Inline styles can't use media queries or pseudo-selectors, are difficult to override due to having a too-high specificity, and you have to copy values around (CSS variables also solve that though), among other issues.
- traveler01 6y ago
  I love how these "developers" who apparently never had to develop a complex layout just hate on stuff they don't comprehend. I mostly use Bootstrap, specially the utilities like the grid and I use a lot of these classes. It simple makes your job easier and plot twist, if you endup migrating you CSS framework without any need I got bad news for this fellow.
  - ratww 6y ago
    Yep. Bootstrap is a great example of how developers of different walks of life and different levels of experience are able to grasp helper classes easily.
- matsemann 6y ago
  Could almost just instead add a class to your html, and at the same place as the markup add a style tag inline writing exactly what you need. Css doesn't have to be one huge chunk. So instead of <div class="lots of stuff">... or <div style="lots of stuff">... one can do <style> .something { lotsofstuff } .something:evenwithpseudo { otherstuff } @andevenwithmedia {} </style> <div class="something"> and just have lots of small <styles> everywhere. That's basically how elm-css[0] does it. One writes css in the attributes of elements, and then when it's converted to DOM-stuff the css is extracted and classes created (or reused if similar). Since it's all elm-code one can reuse variables, call functions, import styles from somewhere etc [0]: https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/ https://package.elm-lang.org/packages/rtfeldman/elm-css/late...
  - jkcxn 6y ago
jarek83 6y ago
Same here, and I'm also a bit terrified by the popularity of Tailwind. It makes me wonder if I'd have to resign from nice project one day because it is stuck in the framework. I think that more projects in Tailwind might mean less space for skilled CSS people. I believe that Tailwind is a trap for people that don't like CSS, because if they one day come to a project with regular CSS there will be a lot of unlearning before they will start working at full-pace. I might be biased because I love CSS and I find it the easiest thing in web-dev, especially now - without IE in the way and with flexbox + grid fellas, not to mention components. It gave me a lot of guidelines how to think about abstractions and how to build them. This translated nicely to other aspects of programming.
- yurishimo 6y ago
  > ...Tailwind is a trap for people that don't like CSS... I can't speak on the validity of this for all devs, but for me, I really enjoy CSS and I love Tailwind too. CSS is there for an escape hatch when I need it, but then I can use the utilities for a lot of mundane styling and placement. Tailwind can absolutely be used for boring layouts and designs but can also be used for really cool custom stuff like this Diablo 4 landing page from a few years ago[0]. People made cool stuff with Bootstrap and then a bunch of crap also got made. Tools ebb and flow and it's up to us as devs to find what's working for us now and then get the work done. Worrying about the future before you even get started doesn't make sense imo. The reality is very few sites are being worked on continuously for more than a few years, so trying to optimize for that potential maintenance burden doesn't make sense. If your site continues to grow and it becomes painful, that likely is a good problem to have and you can address the issue when you have the team and budget to do so. [0]: http://web.archive.org/web/20191222080351/https://diablo4.blizzard.com/en-us/ http://web.archive.org/web/20191222080351/https://diablo4.bl... & https://twitter.com/tailwindcss/status/1190423327590027264?s=20 https://twitter.com/tailwindcss/status/1190423327590027264?s...
- ahuth 6y ago
  Tailwind doesn't mean less space for skilled CSS people any more than design systems mean less space for skilled designers, or React means less space for skilled JavaScript folks. Tailwind is a tool that's absolutely for skilled CSS people (you still have to know what everything is doing). And it is much more maintainable for a large number of people working on styling.
mekster 6y ago
You have just never done a responsive design. Inline styles can't be overridden on screen size and having all the styles hidden behind a random class name makes it hard to figure out what's being specified but if class names tell what styles are applied, you don't have to go edit part of a css just to change margin size.

splatzone 6y ago

In my experience, the real convenience of Tailwind over inline CSS is using all the variant classes (https://tailwindcss.com/docs/configuring-variants https://tailwindcss.com/docs/configuring-variants) like hover:font-bold, md:w-full, group-hover:text-gray-500 etc to compose your styles. It's not possible to use pseudo classes like :hover in inline CSS. I've also found the tailwind.config.js very useful - you can load it up with all your custom colours and fonts. It's much easier to refer to text-primary (for your primary brand colour) than remembering a hex code and pasting it all over your markup :)

robin_reala 6y ago
CSS custom properties do that natively though.
- splatzone 6y ago
  That's true, but not for media queries or pseudo selectors. I suppose with CSS custom properties it would work something like this (please correct me if you know a terser way to use defined colours and weights): <span style="color: var(--color-primary); font-weight: var(--weight-extrabold);">my text in primary color and extrabold</span> I believe Tailwind's syntax is still far terser and more manageable: <span class="text-primary font-extrabold">my text in primary color and extrabold</span> When you have lots and lots of styling this quickly becomes important
  - robin_reala 6y ago
    OK, but my assumption was that this syntax was proposed as an incentive to use Tailwind, rather than trying to cram custom properties into style attributes. If I’m going to use custom properties it would be in a way that plays to CSS’s strengths.
andrei_says_ 6y ago
In my latest project I imported tailwind’s colors into a map and added a function to retrieve them. My scss looks like this: .card { color: c(gray-700); } Same for font sizes, font family definitions, screen sizes. I like having to remember less stuff, within my scss definitions.

ratww 6y ago

> class="flex flex-wrap" doesn't seem any better than just having the equivalent inline styles on it It is better than inline styles, though. Inline styles can't use media queries or pseudo-selectors, are difficult to override due to having a too-high specificity, and you have to copy values around (CSS variables also solve that though), among other issues.

traveler01 6y ago
I love how these "developers" who apparently never had to develop a complex layout just hate on stuff they don't comprehend. I mostly use Bootstrap, specially the utilities like the grid and I use a lot of these classes. It simple makes your job easier and plot twist, if you endup migrating you CSS framework without any need I got bad news for this fellow.
- ratww 6y ago
  Yep. Bootstrap is a great example of how developers of different walks of life and different levels of experience are able to grasp helper classes easily.
matsemann 6y ago
Could almost just instead add a class to your html, and at the same place as the markup add a style tag inline writing exactly what you need. Css doesn't have to be one huge chunk. So instead of <div class="lots of stuff">... or <div style="lots of stuff">... one can do <style> .something { lotsofstuff } .something:evenwithpseudo { otherstuff } @andevenwithmedia {} </style> <div class="something"> and just have lots of small <styles> everywhere. That's basically how elm-css[0] does it. One writes css in the attributes of elements, and then when it's converted to DOM-stuff the css is extracted and classes created (or reused if similar). Since it's all elm-code one can reuse variables, call functions, import styles from somewhere etc [0]: https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/ https://package.elm-lang.org/packages/rtfeldman/elm-css/late...
- jkcxn 6y ago

jarek83 6y ago

Same here, and I'm also a bit terrified by the popularity of Tailwind. It makes me wonder if I'd have to resign from nice project one day because it is stuck in the framework. I think that more projects in Tailwind might mean less space for skilled CSS people. I believe that Tailwind is a trap for people that don't like CSS, because if they one day come to a project with regular CSS there will be a lot of unlearning before they will start working at full-pace. I might be biased because I love CSS and I find it the easiest thing in web-dev, especially now - without IE in the way and with flexbox + grid fellas, not to mention components. It gave me a lot of guidelines how to think about abstractions and how to build them. This translated nicely to other aspects of programming.

yurishimo 6y ago
> ...Tailwind is a trap for people that don't like CSS... I can't speak on the validity of this for all devs, but for me, I really enjoy CSS and I love Tailwind too. CSS is there for an escape hatch when I need it, but then I can use the utilities for a lot of mundane styling and placement. Tailwind can absolutely be used for boring layouts and designs but can also be used for really cool custom stuff like this Diablo 4 landing page from a few years ago[0]. People made cool stuff with Bootstrap and then a bunch of crap also got made. Tools ebb and flow and it's up to us as devs to find what's working for us now and then get the work done. Worrying about the future before you even get started doesn't make sense imo. The reality is very few sites are being worked on continuously for more than a few years, so trying to optimize for that potential maintenance burden doesn't make sense. If your site continues to grow and it becomes painful, that likely is a good problem to have and you can address the issue when you have the team and budget to do so. [0]: http://web.archive.org/web/20191222080351/https://diablo4.blizzard.com/en-us/ http://web.archive.org/web/20191222080351/https://diablo4.bl... & https://twitter.com/tailwindcss/status/1190423327590027264?s=20 https://twitter.com/tailwindcss/status/1190423327590027264?s...
ahuth 6y ago
Tailwind doesn't mean less space for skilled CSS people any more than design systems mean less space for skilled designers, or React means less space for skilled JavaScript folks. Tailwind is a tool that's absolutely for skilled CSS people (you still have to know what everything is doing). And it is much more maintainable for a large number of people working on styling.

mekster 6y ago

You have just never done a responsive design. Inline styles can't be overridden on screen size and having all the styles hidden behind a random class name makes it hard to figure out what's being specified but if class names tell what styles are applied, you don't have to go edit part of a css just to change margin size.