7 ms·

On the surface, the markup is pretty damn awful. But if you reach certain level of proficiency, this will definitely speed up development. <div class="lg:flex

• rjknight 7y ago
  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.
  • 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.
• ahuth 7y ago
  That's fair. However, it is pretty straightforward to extract these to something reusable using Sass, css-modules, or templating (Handlebars, Nunjucks, React, etc). So you can move really fast and experiment when you need to, and then extract to something shared when you're ready to DRY it up.
• wltprgm 7y ago
  The classes are exactly why it shines
• gerardnll 7y ago
  You can move those clases into a css file. button { @apply border bg-white; // ... }
• reaperducer 7y ago
  It's as if one person was arguing for hard-line separation of style and content, and another person was arguing that in-line is the way to go, and then Tailwind came along and said, "Why not both?" So now it's the worst of both worlds: an abstraction layer and dirty code.
  • city41 7y ago
    Tailwind isn’t the first to take the utility class approach. Atomic CSS was an early implementation of the idea: http://acss.io http://acss.io
    • reaperducer 7y ago
      It doesn't have to be first to be bad. They can both be bad.
      • blattimwind 7y ago
        uikit as well (the CSS framework, not the Apple thing)
      • city41 7y ago
        It's not necessarily bad. There are pros and cons to all css approaches. Atomic classes definitely have their fans. It's more a question of which pros and cons matter to you.
  • csande17 7y ago
    I think it's a little more subtle than you're saying. When you use inline styles for everything, you're making the initial development a little faster by making future maintenance and changes a lot harder. (Like, if you decide headings should be italic instead of bold, that's a one-liner fix if you're using CSS properly, but if you're using inline styles you have to individually fix every heading on every page.) So most people have internalized "don't use inline styles for everything" as a general rule. But if you don't actually care about that sort of future maintenance (or you're charging hourly for it), then using inline styles for everything looks really attractive to you! But you can't literally use inline styles for everything because even non-experts know that using inline styles for everything is bad for future maintenance. So instead you pull in Tailwind so you can say you're using a CSS framework.
• robertoandred 7y ago
  At that point, you're basically just using inline styles. Don't get the real benefit of this library.
• leeoniya 7y ago
  i've grumbled about this, too. Tailwind recommends PurgeCSS, but i'll plug my own lib here: https://github.com/leeoniya/dropcss https://github.com/leeoniya/dropcss i have a specific section on how to handle tailwind's unorthodox classnames: https://github.com/leeoniya/dropcss#special--escaped-sequences https://github.com/leeoniya/dropcss#special--escaped-sequenc...
• 32gbsd 7y ago
  that is some awful looking css you have there.
• wwweston 7y ago
  OK, this: <div class="lg:flex lg:items-center lg:justify-between">` Isn't this why we have CSS preprocessors? So we can do: <div class="description-of-what-this-is"> .description-of-what-this-is { .lg_flex() .lg_items-center() .lg_justify_between(); } Assuming there's enough complexity beneath the mixins to justify their use -- some of these might just be CSS properties.
  • Ligrev 7y ago
    That assumes you have the means, the knowledge, and the time, to go through a build step. What you find to be clean code might go the opposite way for someone (i.e. why would I use scss if utils are all I need?). You might work with large scale apps where BEM may make more sense. You might work on a site builder where utils might be better. You might be creating splash pages for marketing purposes where going for element selectors may be enough.
  • mcbetz 7y ago
    You can do this with Tailwind as well: https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components // in JS, then build .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
    • terenceng2010 7y ago
      This feature makes it a very progressive library for various stages of development. Inline earlier, then gradually extracting the style for reuse in later stage. Besides, their documentation is really good for one to learn those newer css concept.
    • SahAssar 7y ago
      In that secenario why even use tailwind? Why not just normal css?
  • ahallock 7y ago
    Just use view templates to capture this if you need to reuse.
• bensochar 7y ago
  Another reason Bootstrap > Tailwind is consistency & context. Adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of alerts & its not always obvious that I'm looking at an alert in code.
  • mkarnicki 7y ago
    > Then I'd have to change my HTML everywhere Nope. Once you see same (sub)set of classes repeated, you would instead define .alert and .alert-danger using Tailwind's @apply directive, and you now have a single place to change how your `alert alert-danger` looks :)
    • amree 7y ago
      Isn't that like recreating bootstrap component again? It's just that this time it's not created by default at first
  • Luc93 7y ago
    I'd imagine a reusable React component something like: <Alert type="danger"> Are you sure? </Alert> Of course this solution would work in other templating engines as well. The alternative would be extracting css components: .alert { @apply px-4 py-3 ... } .alert-danger { @apply bg-red-100 .. }
• stanmancan 7y ago
  Nobody likes the look of utility css frameworks, but once you use it, it’s tough to go back.