How I Learned to Shut Up and Love Tailwind CSS

I'm an old school web developer. My first web page loaded on the Mosaic browser. You just can't get more older or schooler than that.

And as the saying goes, it's hard to teach a new dog old tricks... wait a minute....

I remember when we used to simply style our HTML with tags like <b> and <i>. Life was simple and we were all so innocent in those days. But then they had to go invent these newfangled cascading whatchamacallits and wrecked everything. And then some smart ass thought HTML should be purely semantic and came up with this crazy XHTML 1.1 transitional, which wasn't transitional at all, TYVM.

I begrudgingly bought into these technologies kicking and screaming and then ended up singing their praises. Then HTML 5 came out and crushed my world once again! But now I couldn't imagine developing without it. And I worry about what's coming to replace it.

And now in the past year or so, I've been hearing nothing but Tailwind, Tailwind, Tailwind! What is it? Looks like a clone of Bootstrap to me. Sure, I'll use Bootstrap to spin up a quick and dirty docs page or something, otherwise, who needs it?!

I was so wrong.

Tailwind != Bootstrap

Tailwind is almost entirely, but not quite altogether unlike Bootstrap. The only similarities they bear are the use of utility classes, and Tailwind's are far better and more comprehensive.

Also, Tailwind CSS is not a UI framework. It offers no styled components like btn-primary for example. It does do some normalization, however, via a tool called "Preflight." Other than that you basically get a blank canvas when you start coding.

Tailwind Reduces Shipped CSS

I've read this over and over and couldn't believe that a CSS framework could result in fewer shipped ones and zeros than a hand-coded website, but again I was wrong. I wrongly assumed that Tailwind was just another fancier Bootstrap. Actually what Tailwind does is far cooler. It's kind of like SASS in that it compiles into something compact and purges anything unused in the deployment package. Now that's cool!

Tailwind is Endlessly Extensible

Another thing that held me back from going full-Tail was that I was stuck with rigidly coded color classes like blue-500, etc. Wrong again. You can extend Tailwind to make your own utility classes such as something like this:

module.exports = {
   theme: {
      colors: {
         primary: '#3455eb',
         secondary:'#8f8f8f'
      }
   }
}

You would then refer to the above color classes as text-primary, bg-primary, border-primary, etc.

You can do this with virtually any other class, such as fonts, etc. In fact, I have a tutorial on adding a custom Google font to Tailwind in React-Native available here.

You Can Use Tailwind to Create Custom Classes

Although you could, and many developers often do, write an entire website using nothing but Tailwind's predefined classes, you can write your own classes using the @apply directive provided by PostCSS. Consider the following code:

@layer components {
   .btn-primary {
      @apply rounded-md shadow-md p-3 bg-slate-500 text-white
   }
}

Are you starting to grasp the power of Tailwind? I only wish I would've discovered it sooner!

Tailwind is Meant to Be Used In Component-Oriented Environments

The last hurdle I finally got over was the fact that I would have to enter those class names over and over again into every element I put on page. I only recently got into React/NextJS, and I'm new to the whole component-oriented design thing.

It just seemed to me that having to change a design decision later down the road could be potentially very problematic by hard-coding these predefined class names into each instance of a styled element. But frameworks like React take that worry away by creating a layer of abstraction between the HTML and the logic and by allowing one to create reusable components.

Looking back now I had effectively created my own ad-hoc component framework in PHP, but I no longer use PHP for websites. I don't use it for much of anything for that matter!

So once again I find myself singing the praises of a technology I only recently scoffed at. I'm sure it won't be the last. I will say one thing for certain, I am becoming more open and willing to try out new frameworks and technologies than I was in the past. It's weird, huh? Usually people get more set in their ways when they age.

I hope you found this article useful, or at least mildly entertaining. For more great information, please read the Designly Blog.