Why We Love Tailwind

Tailwind CSS is a CSS framework of composable HTML utility functions and it's great. It favors markup-heavy design with little-to-nothing in the way of stylesheets.

Here's an example of it in action - our link styling.

This is what the markup looks like:

<a class="c-link" href="/blog">Our Blog</a>

Now here's the relevant section of tailwind.css:

.c-link {
    @apply text-primary-highlight;
}

.c-link:hover {
    @apply underline;
}

Simple, concise, powerful - there are so many things that make this and the rest of Tailwind great. Here are a few of them.

Standardization and Theming

The ability to theme (e.g. text-primary-highlight) gives Tailwind a powerful consistency, but one of its killer realizations of standardization comes in the way it envisions spacing.

With padding (p-1) and margin (m-1) denominated with a simple unit range, available in combinations like padding-top (pt-1), margin top and bottom spacing (my-1), etc, with tailwind you can dedicate yourself to a few common sizes (say 2, 4, 6) use them in a reasonable way, and achieved the desired effect of visual balance. The system obviously depends on you exercising a certain amount of discipline, but it's a big improvement on just shooting from the hip with random space values (12px? 1.25rem? Sure). It puts layout in the UI on rails.

Composability

Because classes in Tailwind can be used together in any combination, you can do things like abstract the design of an element into a component via @apply, (for example, our link component) then add the spacing (e.g. mt-1, p-2, etc) in the individual markup element, separating out the layout and design code.

Semantic Value

Tailwind does a great job of using consistent structures for classes. Padding, margin, width, height - everything with some kind of space value - uses the same spread of unit values. Tailwind makes it easy to guess what a given utility class should be, given a rational naming system, which just makes you as a developer that much more productive.

This also addresses one of the biggest criticisms of Tailwind, that it's "just another DSL" adding a layer of complexity and buggy cruftiness between you and what should be pure, sweet markup. Why not do this all in straight CSS, wouldn't it be simpler?

But because the way the public API in Tailwind is laid out makes it easy to comprehend and make guesses about, there's less you need to straight up memorize, and you become comfortable using it quickly.

Community

One side-effect of making the Tailwind utilities composable is that you get a long "recipe" of all the classes that make up a particular design element. Pair with this with an active community of developers (they love their tools!) and continuing support from the original creators of Tailwind via their new library of paid Tailwind components, Tailwind UI and it's exceedingly easy to use a few community-sourced features as a starter and evolve them to suit your particular needs

Even the design of Tailwind itself is more conducive to community - passing around CSS snippets is awkward. You have to make sure the selectors are applied correctly and the CSS itself put in the right place to make sure that the right rules win out. But with Tailwind, just copy the class string from a given HTML component, add it to yours, and you're done. It makes it much easier to share small, component-level snippets.

These are just some of the reasons we've taken a shine to Tailwind, but the strongest thing we can say in its favor is that it's accelerated our frontend development. Tailwind delivers on its promise to wrap small, essential blocks of design and layout logic into their own standardized, bit-sized HTML classes, and in so doing empower developers to haggle less with their CSS spacing and instead just get on with the business of bootstrapping a prototype quickly.