July 8, 2019 By Angie Herrera
Why I Haven’t Jumped On the Tailwind CSS Bandwagon
Utility-first CSS (also known as functional CSS or atomic CSS) is all the rage. I’ve stayed away from it. But likely not for the reasons you may think.
Update 10/5/20
This post has gained some traction recently so it made sense for me to add this update. What I felt when this was written was 100% true. But in the year that followed, traction for Tailwind grew as did my curiosity. That led to my adoption of Tailwind as I write in All Aboard the Tailwind CSS Bandwagon.
Tailwind CSS.
It’s all the rage these days. Or more specifically, utility-first CSS (also known as functional CSS or atomic CSS) is all the rage. I’ve stayed away from it. But likely not for the reasons you may think.
What is Tailwind CSS?
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. The beauty about this thing called tailwind is it doesn't impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that are unique.
(Source)
Tailwind, and other frameworks like it, makes use of single-purpose classes that style and behave elements no matter the context. It’s kind of the opposite of semantic CSS that many of us have been putting into practice since the days of Zen Garden.
The reasoning
I do like to read up on new methodologies and tricks and whatnot when it comes to pretty much any part of my work, be it front-end development, UI design, UX, etc. So I took a closer look Tailwind CSS. I’ve looked at it a few times actually, wanting to understand the why behind it and the reasons developers were jumping all over it before I myself decided to jump on the bandwagon.
And my conclusion so far is that a lot of the developers singing Tailwind’s praises base their argument on two things:
1. speed;
2. not having to think about or write (much) about CSS.
When it comes to speed, don’t get me wrong – I totally get the appeal. 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.
The second reason – not having to think about or write much CSS – is what took me aback a little bit. But that’s because I love CSS. It’s magical to me.
But there are plenty of developers (mainly back-end devs I’d wager given the chatter I’ve seen) that can’t stand CSS. They downright loathe it. And that’s totally fine. So the appeal of something like Tailwind CSS makes a ton of sense.
Just not to me. Because while I love CSS, I also feel like there’s so much more for me to learn about it. That becomes especially apparent as new CSS specs are being imagined and tested. (Side note: if you enjoy CSS and are on Twitter, follow Jen Simmons.) Then, add SASS into the mix and, despite my experience with it, I feel like there’s so much more I could learn to get so much better at writing good, efficient, and DRY SASS/CSS. (By the way, this all means starting to use Zurb Foundation properly – a topic for another day.)
Can Tailwind help me with that? I’m honestly not sure. Probably?
But for now, 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’m not at all saying Tailwind is bad. And last I checked devs can and should use the tools that work best for them (such as Jay Freestone over at Browser, who wrote up a more detailed but similar post). If you love Tailwind CSS (or some other similar framework), by all means, go for it! I’m just saying that right now, it just ain’t my cup of tea. 🤷