5 ms·

I find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Eve

I find that the verbosity is annoying at first, but it makes it incredibly easy to come back to some old HTML and work out exactly what it's doing, and why. Even with Bootstrap, you need to maintain a mental model of what the classes are doing and how they compose, and each custom class adds more complexity to that mental model. Yes, Tailwind has lots of classes, but each class does one thing, so reasoning about the final composition is incredibly easy.

cageface 7y ago
This exactly. With more traditional approaches it can be very difficult to find exactly what css rules are affecting what elements. Tailwind is more verbose but also requires a lot less context to understand what’s going on. It also makes responsive styling a lot easier in my experience.
have_faith 7y ago
> Tailwind has lots of classes, but each class does one thing I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for. The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when needed which is what css classes are generally good for. I find BEM naming conventions much more friendly to come back to than markup full of miniature class names.
- marc_io 7y ago
  You can work with components too, just use the @apply directive. https://tailwindcss.com/course/composing-utilities-with-apply/ https://tailwindcss.com/course/composing-utilities-with-appl...
- andrei_says_ 7y ago
  My sense is this is for people who do not know css to the level needed to implement BEM. Also, it replaces the cost of knowing css and naming things (class names) with the cost of learning the tailwindcss classes. I will stick to BEM + colors and sizes maps because this feels almost like using the style tag on each element. For non-css expert engineers writing spa components, tailwind can be useful. I can also see that it’s not trivial to mix tailwindcss and scss processors so it’s a no for me. It has the benefit to limit spacing and color sets to presets but I already do this in my BEM codebase.
  - smnplk 7y ago
    what is BEM?
    - akie 7y ago
      Block-Element-Modifier, a way to structure your CSS. http://getbem.com/ http://getbem.com/
- jeffschofield 7y ago
  The recommended way to handle components is by using template partials or JS to manage your card component rather than CSS classes. [1] Though, you can still use BEM with TailwindCSS through the @apply directive. Adam calls the directive a kind of "trick" to get more devs on board with utility-first but it does help a lot of you're used to reasoning about CSS with BEM. [1] https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
- city41 7y ago
  It’s common, even expected, to extract that card into a component of some kind (React, web components, mustache template, etc) so you still only have to update the css once.
  - ec109685 7y ago
    Your components often get bloated since you have to account for subtle business logic differences between views.
    - stefanfisk 7y ago
      Isn't that what the container/component split is for? Presentation logic in a container, markup and styling in a component. If you need to reuse the same visual component in logically different contexts you create a new container that mangles the props as appropriate.
      - ec109685 7y ago
        Yeah, you can. I've just seen this result in really complicated components. Other styles of CSS naturally separate presentation from html markup generation, so the cost of forking and specialized components is much lower.
  - jp_sc 7y ago
    Sure, until, you need a variation on that card for some elements, and add some other tailwind classes to the HTML to do it. Everything seems to work fine for a while. Then you update the styles of the card again but the new styles clash with the ones in those tailwind classes and you end with broken styles in some elements. Mixing components and utility classes is a recipe for future chaos.
    - city41 7y ago
      How is that different from any other css? I'd argue any css solution would have this problem with components. edit: thinking more, you can override classes. So yeah, maybe utility/atomic classes are not as effective here.
- nicpottier 7y ago
  I had a similar recoil to this approach and then I tried it, and I think they are actually onto something. Yes, you may have more than one card in your system, but in all likelihood you aren't repeating the HTML for that card more than once, rather you have it in a template of some kind which is called. So while you may have more than one card on your site, you probably don't have the template for it defined more than once. (at least ideally you don't) For those cases where you do want to extract that code, Tailwind makes that easy to do. Tailwind is a weird thing and like I said I really thought it was insane at first. But after rewriting a site in it in a few days I have to say it is better than the standard semantic CSS by a mile.
johnmaguire2013 7y ago
If each class does one thing, what's the advantage over using inline styles?
gyrgtyn 7y ago
It's good across projects/teams/job too. You know what everything does. You don't have to learn every btn--rounded--primary thing for every app you work on.

cageface 7y ago

This exactly. With more traditional approaches it can be very difficult to find exactly what css rules are affecting what elements. Tailwind is more verbose but also requires a lot less context to understand what’s going on. It also makes responsive styling a lot easier in my experience.

have_faith 7y ago

> Tailwind has lots of classes, but each class does one thing I think this masks a lot of complexity that you have to manage when taking on this approach. And it's not because the approach is good or bad, more what it is or isn't suited for. The example on the homepage is very slickly presented, but the end result markup is extremely verbose. If I have a Card component, I would like to update them all at once when needed which is what css classes are generally good for. I find BEM naming conventions much more friendly to come back to than markup full of miniature class names.

marc_io 7y ago
You can work with components too, just use the @apply directive. https://tailwindcss.com/course/composing-utilities-with-apply/ https://tailwindcss.com/course/composing-utilities-with-appl...
andrei_says_ 7y ago
My sense is this is for people who do not know css to the level needed to implement BEM. Also, it replaces the cost of knowing css and naming things (class names) with the cost of learning the tailwindcss classes. I will stick to BEM + colors and sizes maps because this feels almost like using the style tag on each element. For non-css expert engineers writing spa components, tailwind can be useful. I can also see that it’s not trivial to mix tailwindcss and scss processors so it’s a no for me. It has the benefit to limit spacing and color sets to presets but I already do this in my BEM codebase.
- smnplk 7y ago
  what is BEM?
  - akie 7y ago
    Block-Element-Modifier, a way to structure your CSS. http://getbem.com/ http://getbem.com/
jeffschofield 7y ago
The recommended way to handle components is by using template partials or JS to manage your card component rather than CSS classes. [1] Though, you can still use BEM with TailwindCSS through the @apply directive. Adam calls the directive a kind of "trick" to get more devs on board with utility-first but it does help a lot of you're used to reasoning about CSS with BEM. [1] https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components
city41 7y ago
It’s common, even expected, to extract that card into a component of some kind (React, web components, mustache template, etc) so you still only have to update the css once.
- ec109685 7y ago
  Your components often get bloated since you have to account for subtle business logic differences between views.
  - stefanfisk 7y ago
    Isn't that what the container/component split is for? Presentation logic in a container, markup and styling in a component. If you need to reuse the same visual component in logically different contexts you create a new container that mangles the props as appropriate.
    - ec109685 7y ago
      Yeah, you can. I've just seen this result in really complicated components. Other styles of CSS naturally separate presentation from html markup generation, so the cost of forking and specialized components is much lower.
- jp_sc 7y ago
  Sure, until, you need a variation on that card for some elements, and add some other tailwind classes to the HTML to do it. Everything seems to work fine for a while. Then you update the styles of the card again but the new styles clash with the ones in those tailwind classes and you end with broken styles in some elements. Mixing components and utility classes is a recipe for future chaos.
  - city41 7y ago
    How is that different from any other css? I'd argue any css solution would have this problem with components. edit: thinking more, you can override classes. So yeah, maybe utility/atomic classes are not as effective here.
nicpottier 7y ago
I had a similar recoil to this approach and then I tried it, and I think they are actually onto something. Yes, you may have more than one card in your system, but in all likelihood you aren't repeating the HTML for that card more than once, rather you have it in a template of some kind which is called. So while you may have more than one card on your site, you probably don't have the template for it defined more than once. (at least ideally you don't) For those cases where you do want to extract that code, Tailwind makes that easy to do. Tailwind is a weird thing and like I said I really thought it was insane at first. But after rewriting a site in it in a few days I have to say it is better than the standard semantic CSS by a mile.

johnmaguire2013 7y ago

If each class does one thing, what's the advantage over using inline styles?

gyrgtyn 7y ago

It's good across projects/teams/job too. You know what everything does. You don't have to learn every btn--rounded--primary thing for every app you work on.