All Aboard the Tailwind CSS Bandwagon

I love CSS. It's magical. And while I fully admit there's still a ton I have to learn (especially as it continues to get better), I think I'm pretty good at it.

Then came along Tailwind CSS. I'd heard about it over a year ago and after several sessions of reading up and trying to understand the fanaticism of it, I concluded it wasn't quite for me. At least not at that time.

Fast-forward a little more than a year and I'm (happily) fully aboard the Tailwind CSS bandwagon.

Yeah, it's kinda ugly code but...

Who cares?

Okay, truthfully, I care. I like clean code. But in some situations I am alright with this kind of markup:

<div class="bg-white rounded shadow border p-6">
	<h3 class="text-2xl font-bold mb-4 mt-0">My Title</h3>
	<p class="text-gray-700 text-sm">Content goes here</p>
</div>

The good news is that Tailwind's @apply directive makes it super easy to turn the above into a BEM-style component in SCSS.

HTML:

<div class="card">
	<h3 class="card__title">My Title</h3>
	<p class="card__description">Content goes here</p>
</div>

CSS/SCSS:

.card {
	@apply bg-white rounded shadow border p-6;

	&__title {
		@apply text-2xl font-bold mb-4 mt-0;
	}

	&__description {
		@apply text-gray-700 text sm;
	}
}

Why would you want to do that? For UI components that you're going to use over and over. Basically, you set a base style for the card (or whatever the component is), and then you can change the style in one of two ways:

1. adding a modifier class;
2. or simply dropping the changes in the HTML via Tailwind's utility classes.

With many of us designers using design systems these days, this makes a ton of sense. And...

It's faster

When I wrote about Tailwind a year ago, the number one reason I saw developers list for embracing Tailwind CSS was speed. That is, speed in development. And in my experience, that is absolutely the case.

Once you get over the learning curve (of mainly trying to remember the dozens of utility classes), it is crazy fast to build out a piece of UI using Tailwind.

Customize it

Tailwind provides a ton out of the gate. But it can't account for every possible little thing in development as far as styling goes and you're not always going to use or need the default colors or other configurations Tailwind has. Fortunately it's super easy to customize Tailwind.

Need a custom type scale? Maybe the default colors aren't anything close to the branding of the site you're working on? Or you need different sizing for shadows or border radiuses? Not a problem! You can tweak an existing config option or extend it in Tailwind's config file. Best of all, it doesn't take long to do at all.

Closing thoughts

I dig Tailwind. Having used it in real projects since January or so, I've seen and experienced the benefits. The designs I create are getting coded up faster and with less thinking about naming stuff "correctly" or "semantically" or whatever. My CSS feels lighter and, more importantly, more concise.

I still feel there's a lot for me to learn when it comes to CSS in general. But that's forever going to be the case because web development is ever-changing. Truth is though, Tailwind is actually helping in this regard. It's implemented a couple new features in the last couple releases that frankly were new to me. Still, where does that leave CSS for me? Obviously it isn't going anywhere. And there are still opportunities to write my own CSS either all on its own or in tandem with Tailwind.

So yeah, Tailwind is rad. And there's plenty of room on the bandwagon.