6 ms·

Judging from all the positive comments in this thread, clearly I must be missing something. This looks horrible to me. Instead of meaningful CSS classes you jus

by efdee 7y ago

Judging from all the positive comments in this thread, clearly I must be missing something. This looks horrible to me. Instead of meaningful CSS classes you just get a bunch of small classes that do very small things, which you're supposed to combine until it looks like what you want. How is that better than writing your CSS manually? (Again, I realise the failure is probably on me. But I don't get it.)

yroc92 7y ago
I’m with you there. It looks nice, but I don’t want to learn all that css.
rjknight 7y ago
There are some nice aspects: - The classes cover many common use-cases and, in some cases, present a simpler "API" than hand-rolled CSS would - You can eyeball a HTML fragment and get a good idea of how the pieces fit together, compared to the normal approach of needing to work out what each individual class does, and then how they fit together. It's easy to remember what the Tailwind classes are doing. - It's dumb, but the ability copy-and-paste entire HTML fragments from one place to another and have the styling "just work" is slightly mind-blowing - Some CSS attributes work oddly depending on the order in which they are applied, or the order of the composition of classes that both attempt to apply the same attribute, and that problem goes away with Tailwind There are other advantages, but these were all quite surprising to me, because my expectations of CSS have always been quite low.
- hackerman555 7y ago
  > It's dumb, but the ability copy-and-paste entire HTML fragments from one place to another and have the styling "just work" is slightly mind-blowing Not really. styled-components makes this simple if you're using react.
iudqnolq 7y ago
Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. Tailwind is essentially unusable without a build step. You can configure it to make composite classes for common styles (button, card, etc.), but if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). It's better than working with CSS manually because you work at a slightly higher level. If it was transformed into a css-like language I would prefer that. As a non-UI expert, I also enjoy having an enumerable limited set of sane choices for most properties.
- deltron3030 7y ago
  >if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for ab testing. If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework. The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order. Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.
  - iudqnolq 7y ago
    What if you want every link (from the perspective of the user, not based on the tag type) to have the exact same style? How would you do that without some sort of build step with an atomic unit for a link? Isn't a section just a case of a component?
    - deltron3030 7y ago
      You could define the anchor element in the preflight.css file (normlize.css/reset). Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.
      - iudqnolq 7y ago
        Fair enough. I'd call that definition a component.
aosaigh 7y ago
The same comment is at the top of every post related to Tailwind. Read this section in the docs and try it out before judging: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first The core principle is that you wrap up all UI elements into components. Most frontend and backend/template frameworks allow you to do this. You then verbosely apply the Tailwind classnames to perform styling, staying out of custom .css files all together.
- saagarjha 7y ago
  This just seems like inline CSS with less verbosity. Where’s the semantic meaning?
  - cageface 7y ago
    In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead and breaks down in the inevitable requirements churn every project goes through. I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.
    - uk_programmer 7y ago
      > In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead. Do people really struggle with this? <div class="hero"> <h1 class="hero-title">Heading</h1> <p class="hero-tagline">Tagline</p> </div> It far more straight forward just to call something what it is and you can actually read the CSS afterwards.
      - phponpcp 7y ago
        This is so much easier to parse too. If you need more rigidity, add BEM on top then you're good to go.
        cageface 7y ago
kristiandupont 7y ago
I had that same initial reaction when I first read about Tailwind. I am now a convert and although it's hard for me to articulate exactly where the magic lies, these are contributing factors: - You can do the entire thing in HTML quickly, including media queries and pseudo-classes. - The predefined sizes and other values are granular enough that you can do just about everything with them, but coarse enough that you often get it right in the first shot. In a sense, it's a little like going from drawing a chart on blank paper to grid paper. - Tailwind intellisense in VSCode shows you the colors you likely need. Each of these points are tiny and could easily be achieved in another way, but combined they have increased my personal joy in frontend development quite significantly.
patricius 7y ago
I use Tachyons, which is also utility-based (and, afaik, an inspiration to Tailwind). The primary improvement is that the amount of CSS you need to write is reduced by 90 % or more. Okay, but now you have to write and repeat all these CSS class names, so what have you gained? Not having to write CSS is more than enough for me, but another important thing is that you get all the information you need in one place to see how something is rendered. You also get that with inline styles, but they are much more verbose (at least compared to Tachyon's short class names), and there are some things that you cannot do with inline styles, but can do with classes. But you no longer have to go back and forth between the stylesheet and wherever you are performing your DOM-rendering to get an understanding of what's happening. Tachyons has truly taken a lot of the pain of writing web applications away for me. It looks kind of ugly in the beginning, but I can't imagine going back to writing oodles of CSS again. Haven't used Tailwind though.
- SPBS 7y ago
  I’m using Tachyons over Tailwind because not needing a build step appeals to me. I vastly prefer the smaller footprint of Tachyons, but I do miss Tailwind’s comprehensive color palette sometimes. I could always manually add it in, but for now I’m sticking to Tachyons’s default colors to keep things simple.
wastedhours 7y ago
Not sure how it'd be on a proper-production level app, but for side projects, being able to just iterate on a single element is pretty neat. I don't necessarily want to remember 30 different context-specific class names when adding a new link or button on a simple page if I know a bit of syntax I can get exactly what I want, when I want it. Again, it's very much a project specific choice, but when you're playing and tweaking and having fun with a design (or simply, iterating on one element multiple times), it's a nice library. That being said, I can imagine a point where once you're happy with a design, there'd be a push to refactor.
dceddia 7y ago
If you have a few minutes, check out a screencast or two from their docs [0]. I was very much in agreement that utility-first looked pretty awful until I saw it in practice. After watching a few of those I started thinking about how much faster it could be to use these utility classes instead of writing it by hand. Everywhere he adds a few quick classes I was thinking "here I'd be going back to the CSS, hunting for that class name, maybe duplicating it to create a unique variation... and it took him 7 seconds with a utility class. Hm." Haven't gotten to try it on a project yet but it's on my list. [0] https://tailwindcss.com/screencasts/ https://tailwindcss.com/screencasts/
Tade0 7y ago
How is that better than writing your CSS manually? My take is that it's not. It's just a convenient shortcut for those who aren't well versed in CSS. I see what kind of problem they're trying to solve, but I think it collapses under its own weight the same as complete, closed components do - just later into the project.

by efdee 7y ago

yroc92 7y ago

I’m with you there. It looks nice, but I don’t want to learn all that css.

rjknight 7y ago

There are some nice aspects: - The classes cover many common use-cases and, in some cases, present a simpler "API" than hand-rolled CSS would - You can eyeball a HTML fragment and get a good idea of how the pieces fit together, compared to the normal approach of needing to work out what each individual class does, and then how they fit together. It's easy to remember what the Tailwind classes are doing. - It's dumb, but the ability copy-and-paste entire HTML fragments from one place to another and have the styling "just work" is slightly mind-blowing - Some CSS attributes work oddly depending on the order in which they are applied, or the order of the composition of classes that both attempt to apply the same attribute, and that problem goes away with Tailwind There are other advantages, but these were all quite surprising to me, because my expectations of CSS have always been quite low.

hackerman555 7y ago
> It's dumb, but the ability copy-and-paste entire HTML fragments from one place to another and have the styling "just work" is slightly mind-blowing Not really. styled-components makes this simple if you're using react.

iudqnolq 7y ago

Their argument is that the idea of separating content from presentation was always a lie, and that your JS, CSS, and HTML code is always intertwined. I've found this to be partly true for web apps. Tailwind is essentially unusable without a build step. You can configure it to make composite classes for common styles (button, card, etc.), but if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). It's better than working with CSS manually because you work at a slightly higher level. If it was transformed into a css-like language I would prefer that. As a non-UI expert, I also enjoy having an enumerable limited set of sane choices for most properties.

deltron3030 7y ago
>if you buy into their philosophy you'll probably want a component-based design (web components, React, Vue, etc). With tailwindcss or tachyons you get some of the benefits of component frameworks without having to use component frameworks, because you can colocate html & "styles" in regular template based systems and scope sections on a page this way. Great DX if you need to render sections conditionally, e.g. for ab testing. If you think in sections rather than individual components anyway, which tailwind kind of promotes by design, you don't gain that much with a component framework. The actual CSS functions like an inverted triangle (see ITCSS) the utility classes access from the html, so you won't have any specificity issues because it's already sorted out by having the CSS in a fixed order. Another advantage is portability of sections between modern frontend JS frameworks and template based systems, you can just copy and paste things around, which is harder if the information about the styles is separated from the html, and without a fixed inverted triangle like CSS structure.
- iudqnolq 7y ago
  What if you want every link (from the perspective of the user, not based on the tag type) to have the exact same style? How would you do that without some sort of build step with an atomic unit for a link? Isn't a section just a case of a component?
  - deltron3030 7y ago
    You could define the anchor element in the preflight.css file (normlize.css/reset). Yeah, a section is a component, but in my book it also involves the visible page background where the element is located (you could override the page background with a section color), like a slice of the page.
    - iudqnolq 7y ago
      Fair enough. I'd call that definition a component.

aosaigh 7y ago

The same comment is at the top of every post related to Tailwind. Read this section in the docs and try it out before judging: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first The core principle is that you wrap up all UI elements into components. Most frontend and backend/template frameworks allow you to do this. You then verbosely apply the Tailwind classnames to perform styling, staying out of custom .css files all together.

saagarjha 7y ago
This just seems like inline CSS with less verbosity. Where’s the semantic meaning?
- cageface 7y ago
  In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead and breaks down in the inevitable requirements churn every project goes through. I was skeptical of Tailwind too until I actually tried it. It’s one of those things like JSX that defies received wisdom but in real use is very nice.
  - uk_programmer 7y ago
    > In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead. Do people really struggle with this? <div class="hero"> <h1 class="hero-title">Heading</h1> <p class="hero-tagline">Tagline</p> </div> It far more straight forward just to call something what it is and you can actually read the CSS afterwards.
    - phponpcp 7y ago
      This is so much easier to parse too. If you need more rigidity, add BEM on top then you're good to go.
      - cageface 7y ago

kristiandupont 7y ago

I had that same initial reaction when I first read about Tailwind. I am now a convert and although it's hard for me to articulate exactly where the magic lies, these are contributing factors: - You can do the entire thing in HTML quickly, including media queries and pseudo-classes. - The predefined sizes and other values are granular enough that you can do just about everything with them, but coarse enough that you often get it right in the first shot. In a sense, it's a little like going from drawing a chart on blank paper to grid paper. - Tailwind intellisense in VSCode shows you the colors you likely need. Each of these points are tiny and could easily be achieved in another way, but combined they have increased my personal joy in frontend development quite significantly.

patricius 7y ago

I use Tachyons, which is also utility-based (and, afaik, an inspiration to Tailwind). The primary improvement is that the amount of CSS you need to write is reduced by 90 % or more. Okay, but now you have to write and repeat all these CSS class names, so what have you gained? Not having to write CSS is more than enough for me, but another important thing is that you get all the information you need in one place to see how something is rendered. You also get that with inline styles, but they are much more verbose (at least compared to Tachyon's short class names), and there are some things that you cannot do with inline styles, but can do with classes. But you no longer have to go back and forth between the stylesheet and wherever you are performing your DOM-rendering to get an understanding of what's happening. Tachyons has truly taken a lot of the pain of writing web applications away for me. It looks kind of ugly in the beginning, but I can't imagine going back to writing oodles of CSS again. Haven't used Tailwind though.

SPBS 7y ago
I’m using Tachyons over Tailwind because not needing a build step appeals to me. I vastly prefer the smaller footprint of Tachyons, but I do miss Tailwind’s comprehensive color palette sometimes. I could always manually add it in, but for now I’m sticking to Tachyons’s default colors to keep things simple.

wastedhours 7y ago

Not sure how it'd be on a proper-production level app, but for side projects, being able to just iterate on a single element is pretty neat. I don't necessarily want to remember 30 different context-specific class names when adding a new link or button on a simple page if I know a bit of syntax I can get exactly what I want, when I want it. Again, it's very much a project specific choice, but when you're playing and tweaking and having fun with a design (or simply, iterating on one element multiple times), it's a nice library. That being said, I can imagine a point where once you're happy with a design, there'd be a push to refactor.

dceddia 7y ago

If you have a few minutes, check out a screencast or two from their docs [0]. I was very much in agreement that utility-first looked pretty awful until I saw it in practice. After watching a few of those I started thinking about how much faster it could be to use these utility classes instead of writing it by hand. Everywhere he adds a few quick classes I was thinking "here I'd be going back to the CSS, hunting for that class name, maybe duplicating it to create a unique variation... and it took him 7 seconds with a utility class. Hm." Haven't gotten to try it on a project yet but it's on my list. [0] https://tailwindcss.com/screencasts/ https://tailwindcss.com/screencasts/

Tade0 7y ago

How is that better than writing your CSS manually? My take is that it's not. It's just a convenient shortcut for those who aren't well versed in CSS. I see what kind of problem they're trying to solve, but I think it collapses under its own weight the same as complete, closed components do - just later into the project.