We're seeing #TailwindCSS get quite some traction, so I figured it was about time to try to understand what sets it apart and what problem it solves.
I think I get it now, and to solidify my understanding, I'm going to try to articulate its benefits.
To understand Tailwind, you need to understand constraint-based design, in which UI elements adhere to a set of constraints designed to make them compose well together to make a harmonious whole.
To go down this rabbit hole, see: https://styled-system.com/guides/why-powers-of-two
This idea isn't unique to Tailwind. Component libraries like Chakra UI and Material-UI apply it already.
This leads to inflated bundle sizes and complex tooling.
So how about we just define the constraints in, say, CSS variables?
Well, you could do that, but consider how you would use those.
You'd keep switching between your components and your styles, defining new classes in your CSS that rely on the constraints, and then applying these classes in your components. It adds a layer of indirection between the styles and the components to apply them to.
So to recap, the advantages:
- Constraints keep your design consistent.
- Simple tooling, with just few kBs shipped to your users.
- Styles defined in the context of the component to which they apply.
And to address the elephant in the room: yes, this addresses problems that inline styles do not. Specifically, it is not trivial to apply constraints using inline styles, and media queries and focus and hover states are not supported at all.
@vinnl Something I noticed when I started using Tailwind is that I didn't have to think about naming any more. That's subtle, but as you know naming is one of the hardest things in programming :). So it removes that friction and makes building UI faster and more enjoyable (not something I thought I'd say about CSS before using Tailwind). Maybe other libraries out there have the same advantage, but Tailwind was the first (and only) utility-based framework I tried.
@vinnl Also, Tailwind is one of those projects that make me a better programmer. By reading their docs and content, I always learn new things. With previous CSS frameworks I just "used them".
This is an instance-of-one managed by Noel De Martin.