5 ms·

The discussions of Tailwind are always heated but fundamentally boring because all the threads are started by people making the obvious objections that arise be

The discussions of Tailwind are always heated but fundamentally boring because all the threads are started by people making the obvious objections that arise before you use it which were answered by Adam three years ago.[1] Do people who have actually used Tailwind in a real project have anything to add? [1] https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ https://adamwathan.me/css-utility-classes-and-separation-of-... For my part, I am seeing slow rendering on some of my sites (page doesn't appear on webpagetest.org until 1s after network is done), and I wonder if maybe having atomic CSS is slower to render? Anyone have experience with that?

sbergot 6y ago
Have you profiled your page? I have used it on medium project and I haven't had any painting speed issue.
- earthboundkid 6y ago
  I can't figure out how to get Chrome to tell me what element is making initial render slow. There are a lot of tutorials for figuring out why JS re-rendering is slow once you have a layout, but there doesn't seem to be a way to identify problems with initial render that I have found.
  - aidos 6y ago
    Can you start by completely blocking the css to check if that’s definitely the issue? I’d quite like to know if there’s a genuine issue to be concerned about.
    - earthboundkid 6y ago
      Here is the site with the media=print hack: https://www.webpagetest.org/result/201207_DiW4_9712575effac226a4b92b8baa9c65b58/ https://www.webpagetest.org/result/201207_DiW4_9712575effac2... You can see it displays the no CSS version around 900ms and then it takes until 1900ms to display the CSS version.
      - aidos 6y ago
        Curious. It renders fast when I hit it on mobile.
        mft_ 6y ago
        Same here – very fast on mobile Safari.
        earthboundkid 6y ago
        I suspect there’s something going on where webpagetest has an unrealistically slow CPU render time.
        aidos 6y ago
        I'm assuming there's something going on between the flash of the heart and the app render that's causing the slowness. By profiling in Chrome (Performance tab -> refresh) it looks like the animations are causing the issue. Having said that, as a user it feels reasonably fast and it's just the flashing content that's weird.
badestrand 6y ago
> Anyone have experience with that? Similar issue for me. I wanted to try Tailwind on my current project and started by including their CSS on my site which made it sluggishly slow (Firefox on Mac). It was in dev mode so no tree shaking but I was too bothered by this new slowness (e.g. select menues taking 1s to open) so I stopped that experiment.
throwawaymsft 6y ago
Most replies are having their Green Eggs and Ham moment. I do not like green eggs and ham. I do not like them, Sam I am. Meanwhile, people who have actually used it, find it great. It's a wonderful framework.
- wishinghand 6y ago
  I find that both tastes are awful. The problems Wathan points out in that blog post are real, but the solution he came up with is a different kind of awful.
jaredcwhite 6y ago
This is a completely ridiculous argument. You're essentially saying that anyone who has objections to a particular tool has never used it, for if they had, they'd certainly love it. Well I've written Tailwind extensively and I don't care for it at all. I also don't agree with most of Adam's arguments, whether made three years ago or today. Shocking, apparently!
- earthboundkid 6y ago
  No, I’m saying that discussion of TW on HN is dominated by points that aren’t relevant if you’ve used it. There are plenty of real ways to criticize TW—the choice of variants is quirky, dev builds slow hot reloading a lot, it doesn’t cover a lot of cases which leads to “Bailwind”, and more I’m sure that I’m not thinking of now—but the criticisms that “it adds too many classes to HTML” or “semantics!” are boring and not useful.
- aidos 6y ago
  I suspect you're trolling because your other comment implies that you don't know Tailwind at all.
  - jaredcwhite 6y ago
    I've written thousands of lines of React components and stylesheets using Tailwind. Have you?
    - deleted 6y ago
      [deleted]
- eyelidlessness 6y ago
  It’s literally the No True Scotsman fallacy
jarek83 6y ago
Well, I don't like Tailwind and I admit that haven't use it. I browsed a lot about it and read the rationale twice already (it's looks amazing how often this article has been cited in just this thread). And I got more away from it after first read, and even more opposed to it after the second read. I maintain projects, across multiple stacks, and Tailwind just looks like it would be a nightmare to maintain in the projects I work and worked. I've played a lot with the https://play.tailwindcss.com/ https://play.tailwindcss.com/ and my objections are even greater. Repetition of classes would cause much more painful style changes. Debugging in chrome looks like a struggle. Cryptic class names that might be used by many other libs or even might be meaning completely different things in other than the current project, renders codebase modularity as not possible - if I want to take something and then show it somewhere else outside my project, I will have hunt for WTH is overriding my styles, just to figure out that one of the "py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7" (instead of "content-container"), means something else on target site and simple name spacing encapsulation does not work fully. The example page does not even semantic use HTML tags - which to me tells that "semantic" might be completely misunderstood by the lib author. Simple design doc in the project would solve problems raised in the said rationale. Indeed - Tailwind seems to be a ready-to-eat design doc. The problem is that it is the same design doc for all people using it. Those reasons makes me not even remotely tempted to try Tailwind.
- earthboundkid 6y ago
  Your objection seems to be: I can't move a component from a TW project to a non-TW project, and it would be difficult to combine a TW project and non-TW project. Is that a fair summary? On the first point, moving a component from one project to another one that use a different CSS framework is sort of a weird thing to do. I've seen cases where people combine Bootstrap with a bunch of random personal styles, but I haven't seen anyone combine Bootstrap with e.g. Material design. ISTM if you're combining projects, you'll get a lot of CSS bloat and unexpected interactions. On point two, you actually can tell TW to use a prefix, so instead of margin-left/right: auto being "mx-auto" it would be "prefix-mx-auto". Doing that would let you combine TW with another project that used the same class names (though obviously, you're going to have to go back and fix all the class names in an existing component). TW's niche, ISTM, is for people who want to make small-ish, highly customized sites quickly. I don't you'll be happy with it if you need to integrate with a lot of legacy CSS. I also think if you don't really need custom styles, then you can just use Bootstrap/Material/Bulma/whatever and it will be much simpler than having to make all your buttons yourself or whatever. But for things like isolated landing pages, TW is great because you get an experience that is like writing a new CSS file, but quicker (no need to switch between the HTML and CSS or make up names) and better guided (preset variables for the sizes, colors, and breakpoints).

sbergot 6y ago

Have you profiled your page? I have used it on medium project and I haven't had any painting speed issue.

earthboundkid 6y ago
I can't figure out how to get Chrome to tell me what element is making initial render slow. There are a lot of tutorials for figuring out why JS re-rendering is slow once you have a layout, but there doesn't seem to be a way to identify problems with initial render that I have found.
- aidos 6y ago
  Can you start by completely blocking the css to check if that’s definitely the issue? I’d quite like to know if there’s a genuine issue to be concerned about.
  - earthboundkid 6y ago
    Here is the site with the media=print hack: https://www.webpagetest.org/result/201207_DiW4_9712575effac226a4b92b8baa9c65b58/ https://www.webpagetest.org/result/201207_DiW4_9712575effac2... You can see it displays the no CSS version around 900ms and then it takes until 1900ms to display the CSS version.
    - aidos 6y ago
      Curious. It renders fast when I hit it on mobile.
      - mft_ 6y ago
        Same here – very fast on mobile Safari.
        earthboundkid 6y ago
        I suspect there’s something going on where webpagetest has an unrealistically slow CPU render time.
        aidos 6y ago
        I'm assuming there's something going on between the flash of the heart and the app render that's causing the slowness. By profiling in Chrome (Performance tab -> refresh) it looks like the animations are causing the issue. Having said that, as a user it feels reasonably fast and it's just the flashing content that's weird.

badestrand 6y ago

> Anyone have experience with that? Similar issue for me. I wanted to try Tailwind on my current project and started by including their CSS on my site which made it sluggishly slow (Firefox on Mac). It was in dev mode so no tree shaking but I was too bothered by this new slowness (e.g. select menues taking 1s to open) so I stopped that experiment.

throwawaymsft 6y ago

Most replies are having their Green Eggs and Ham moment. I do not like green eggs and ham. I do not like them, Sam I am. Meanwhile, people who have actually used it, find it great. It's a wonderful framework.

wishinghand 6y ago
I find that both tastes are awful. The problems Wathan points out in that blog post are real, but the solution he came up with is a different kind of awful.

jaredcwhite 6y ago

This is a completely ridiculous argument. You're essentially saying that anyone who has objections to a particular tool has never used it, for if they had, they'd certainly love it. Well I've written Tailwind extensively and I don't care for it at all. I also don't agree with most of Adam's arguments, whether made three years ago or today. Shocking, apparently!

earthboundkid 6y ago
No, I’m saying that discussion of TW on HN is dominated by points that aren’t relevant if you’ve used it. There are plenty of real ways to criticize TW—the choice of variants is quirky, dev builds slow hot reloading a lot, it doesn’t cover a lot of cases which leads to “Bailwind”, and more I’m sure that I’m not thinking of now—but the criticisms that “it adds too many classes to HTML” or “semantics!” are boring and not useful.
aidos 6y ago
I suspect you're trolling because your other comment implies that you don't know Tailwind at all.
- jaredcwhite 6y ago
  I've written thousands of lines of React components and stylesheets using Tailwind. Have you?
  - deleted 6y ago
    [deleted]
eyelidlessness 6y ago
It’s literally the No True Scotsman fallacy

jarek83 6y ago

Well, I don't like Tailwind and I admit that haven't use it. I browsed a lot about it and read the rationale twice already (it's looks amazing how often this article has been cited in just this thread). And I got more away from it after first read, and even more opposed to it after the second read. I maintain projects, across multiple stacks, and Tailwind just looks like it would be a nightmare to maintain in the projects I work and worked. I've played a lot with the https://play.tailwindcss.com/ https://play.tailwindcss.com/ and my objections are even greater. Repetition of classes would cause much more painful style changes. Debugging in chrome looks like a struggle. Cryptic class names that might be used by many other libs or even might be meaning completely different things in other than the current project, renders codebase modularity as not possible - if I want to take something and then show it somewhere else outside my project, I will have hunt for WTH is overriding my styles, just to figure out that one of the "py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7" (instead of "content-container"), means something else on target site and simple name spacing encapsulation does not work fully. The example page does not even semantic use HTML tags - which to me tells that "semantic" might be completely misunderstood by the lib author. Simple design doc in the project would solve problems raised in the said rationale. Indeed - Tailwind seems to be a ready-to-eat design doc. The problem is that it is the same design doc for all people using it. Those reasons makes me not even remotely tempted to try Tailwind.

earthboundkid 6y ago
Your objection seems to be: I can't move a component from a TW project to a non-TW project, and it would be difficult to combine a TW project and non-TW project. Is that a fair summary? On the first point, moving a component from one project to another one that use a different CSS framework is sort of a weird thing to do. I've seen cases where people combine Bootstrap with a bunch of random personal styles, but I haven't seen anyone combine Bootstrap with e.g. Material design. ISTM if you're combining projects, you'll get a lot of CSS bloat and unexpected interactions. On point two, you actually can tell TW to use a prefix, so instead of margin-left/right: auto being "mx-auto" it would be "prefix-mx-auto". Doing that would let you combine TW with another project that used the same class names (though obviously, you're going to have to go back and fix all the class names in an existing component). TW's niche, ISTM, is for people who want to make small-ish, highly customized sites quickly. I don't you'll be happy with it if you need to integrate with a lot of legacy CSS. I also think if you don't really need custom styles, then you can just use Bootstrap/Material/Bulma/whatever and it will be much simpler than having to make all your buttons yourself or whatever. But for things like isolated landing pages, TW is great because you get an experience that is like writing a new CSS file, but quicker (no need to switch between the HTML and CSS or make up names) and better guided (preset variables for the sizes, colors, and breakpoints).