Tailwind CSS - Overview

We've worked a lot with Bootstrap, Foundation and other CSS frameworks. Each time we start a project with one we always figure we'll use it for quick prototyping and layout and eventually take what we need and lose the rest. We'll fix it.

The sad reality is, we don't always do that. At a certain point it becomes fragile and too heavy a hand leads to all sorts of unintended results. We play it safe, load up Bootstrap and jQuery and call it an MVP.

I'm not proud of this but I take solace in knowing I'm one of many.

Tailwind CSS is a little different.

With Tailwind we'll process the CSS with a configuration file and it will spit out a production ready stylesheet. That's all there is to it.

This isn't a tutorial on installation or usage -- many smarter people have already done that. This is an opinionated post about what we at Owl Dev like about it.

What we like most is that we're having fun.

Utility based, Tailwind let's you spend your front end time fondling HTML, which I find thoroughly enjoyable. I dig the instant gratification of seeing something come to life and just work. I like it even more if I'm not constantly changing context and tabbing back and forth between HTML my CSS.

With Tailwind you build up components by chaining together utility classes. For example, from the docs, a button would look something like this

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

That's just crazy. Right?

I have buttons everywhere. I'm supposed to write this crap out every time I want a button? How am I even going to remember?

Tailwind has an answer. Using an @apply directive I can extract components as patterns emerge.

To use the above example, rather than add all those classes, I'm going use @apply to create a button component in my stylesheet.

.btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }

Yes, I'm creating classes just like Bootstrap. But I'm creating just the ones I need and I'm doing at the end of development, after the patterns have become apparent and I know exactly what I want.

So now, whenever I want a blue button my HTML is going to be sensible.

<button class="btn btn-blue">
  Button
</button>

All of the Tailwind classes are intuitively named.

It isn't hard to remember that that bg-teal-600 is background-color: #319795. Okay, that one might be hard to remember, but text-black is easy enough and if you can't figure out font-bold you won't have read this far anyway.

Best of all, it's almost idiot proof.

By following a few best practices you'll find that the cascade doesn't matter as much and it is actually difficult to introduce breaking changes.

No more re-purposing classes and constantly having to come up with new names. Nobody likes using .blog-post-image for a product image in an entirely different section just because you already wrote it and it's the same layout anyway.

For this guy, Tailwind has breathed a breathe of fresh air into the front end. Breathed a breathe? Yeah, I'm gonna leave it.