Tailwind CSS: Back Off The Bandwagon

In mid-2019 I wrote a relatively short article about how I hadn’t jumped on the Tailwind CSS bandwagon. The reason was mainly because I absolute love CSS and didn’t feel like the pros of Tailwind CSS outweighed the cons of CSS.
 

A bit more than exactly a year later I wrote a follow-up article about my eventual adoption of Tailwind. I enjoyed it during a particular stressful year (on so many levels) where I was cranking out code like never before. Tailwind made that easier for a couple of big projects.
 

Now in 2021 I can honestly say I gave Tailwind a shot and I’m no longer on its bandwagon.
 

Tailwind, as a framework, is fine

Before I dive into my reasoning, I need to make one thing super clear: I am not a Tailwind hater. And I firmly believe that Tailwind CSS is not, in and of itself, bad or terrible or whatever other negative adjectives haters use to describe it. I have nothing against Tailwind. I have nothing against Adam Wathan. Tailwind is fine. It will continue to be fine for a while.
 

Tailwind is, however, just a tool. One of many out there that a developer can use to build out the front-end styling of a website or app. It’s just a tool. It doesn’t mean you have to use it. There are so many web tools and technologies out there that I guarantee I will never use a huge majority of them. And you know what? That’s okay. It boils down to preference.
 

It’s not you, it’s me

I’m glad I gave Tailwind a solid try with real-world projects. With how popular it is right now, it adds another item to my skillset. Honestly though, unless a client outright requires Tailwind CSS, I’m probably not going to use it over my CSS/SCSS setup¹.
 

In my original Tailwind article, I mentioned the following:
 

“Tailwind seems to really make it crazy fast to build out a site or app’s CSS. Who doesn’t love to add a bit more efficiency and speed to their work? So I’m going to leave that bit aside. It’s a totally fair and justifiable reason. But for me, it’s not enough. There has to be more.”

I still feel there has to be more. Unfortunately I just don’t think there is. In my view, Tailwind feels like a shortcut to CSS. And that’s okay if what you need or want is a shortcut, particularly if you hate writing CSS. (Which I’ll never understand, but hey, you do you.) 
 

So the advantages you get in tacking on utility classes in your HTML or using @applyeverywhere just isn’t a compelling enough reason for me. Plus, if I’m honest, there were times where I had to look up or remember how to get an element styled a certain way when it probably would’ve been faster had I just written good old CSS.
 

That brings me to this other line I wrote:
 

“I feel like sharpening my CSS and SASS skills are a better use of my time and energy than hopping on yet another development bandwagon.”

I have always loved learning. I’ve never been one to rest on my laurels when it comes to my areas of expertise, one of which is CSS. When I was using Tailwind CSS I realized just how much I had been missing from advancements in CSS. Over the years I have moved from plain CSS to Zurb Foundation to Tailwind CSS and, for the most part, hadn’t realized how many things were now possible. 
 

So I will give Tailwind credit there – Tailwind helped push me to dive into some new things with CSS. That said, it didn’t do so in an immersive way. I had to translate between what Tailwind was doing and where it actually came from (plain CSS). Jared White, in his Dev.to post puts it perfectly: “writing all your CSS files with @applyeverywhere basically means you’re not learning and authoring CSS”. It’s a little like copying your smart friend’s homework without having done your own – you don’t really learn anything. Therein lies the rub.
 

My desire to actually learn more and get better at CSS meant I had to get closer to the source: plain CSS (with sprinkles of SCSS). Tailwind wasn’t going to cut it.
 

Breaking up

One thing that I completely overlooked until earlier this year is just how committed you have to get with Tailwind. If you only use the utility classes it’s probably easy enough to rip Tailwind out of a site. But if you’ve used @apply in any significant way, it becomes a project of its own. It’s not that different from ripping out Foundation. And I know this because I’m in the middle of a couple of projects, each using one or the other, where enough style changes warrant ripping out the previous framework.
 

Speaking of utility classes, let’s talk about one of the first points that come up in this discussion: ugly code. Who cares, right? Take a look at this:

<div class=“min-w-0 flex-auto space-y-0.5”>
  <p class=“text-lime-600 dark:text-lime-400 text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase”>
    <abbr title=“Episode”>Ep.</abbr> 128
  </p>
  <h2 class=“text-black dark:text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate”>
    Scaling CSS at Heroku with Utility Classes
  </h2>
  <p class=“text-gray-500 dark:text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium”>
    Full Stack Radio
  </p>
</div>

Maybe that doesn’t bother you, but it completely bothers me while editing and writing code. Is it just an aesthetic “thing”? Absolutely. Perhaps it’s that I’m a designer first. Or my penchant for simplicity even in my code. Whatever the reason, I just can’t stand that mess of code.
 

A note on evangelism

There are few things I am repelled by more than blind evangelism that borders on cult-like following. Unfortunately Tailwind CSS has developed such a following. Obviously not everyone but enough for some of us to notice. The fact that people get up in arms and so angry and defensive about Tailwind is absolutely insane. I hope they’re that passionate about something more important than what CSS framework someone chooses to use.

That alone isn’t, for me, a reason to not use a tool. (I’ve seen plenty of angry Apple fanboys and yet here I am, writing, designing, and coding on a Mac.) But I’d be lying if I said that it certainly doesn’t help gain any brownie points. That said, I don’t blame Adam Wathan or his team; that falls squarely on people who can’t stand when someone has a differing opinion. Remember, opinions are just that; opinions. Doesn’t make a differing one wrong.
 

Peace out

At the end of the day, there are benefits to choosing Tailwind. Speed, small file size, and the ability to from a blank page to a nifty design by purely writing some div tags and utility classes. But for me, those benefits aren’t enough justification for me to use Tailwind on the majority of my client projects. CSS has made so many leaps forward since I first learned it, it’s worth the effort in getting to know it better.
 

With a year or so of using Tailwind under my belt, I can honestly say (again) that Tailwind just isn’t my cup of tea. If it’s yours, cool.
 

✌️

1. Just like Tailwind CSS is a tool, so is SCSS/SASS. It just happens to be my tool of choice until it’s no longer necessary. A topic for another time. ↩