Thoughts on TailwindCSS

Within the last months I had to use TailwindCSS a lot during my daily work. In previous projects I've normally used Bootstrap or some custom CSS, so Tailwind was kind of new to me. In this blog post I'll share my experience and what I think about using TailwindCSS. To be honest, this might be a little bit 'unfair' since Tailwind and frameworks like Bootstrap follow different philosophies, but it's simply my opinion that I got during my work. Also I'm no 'hardcore frontend guy' who knows every tweak and optimization, so maybe some of the points written here can be done better.

What is TailwindCSS?

In contrast to Bootstrap, which provides semantic CSS classes that have some meaning like btn or navbar, TailwindCSS provides only utility CSS classes that wrap CSS attributes, e. g. text-gray-400 for color: var(--gray-400). This should enable developers to work only in their HTML / JSX / ... markup and avoid additional CSS files. Tailwind also tries to optimize the finally distributed CSS, so no unused styles are delivered to the client.

"Man, why do I need so much tooling here?"

One of my first thoughts on Tailwind was: "Why can't I just use those CSS classes without having to install a CLI or Node stuff?! I just want to style my pages!". I was really surprised, that there was no CSS file like in Bootstrap that offers me everything and just leaves me alone with other stuff. Anyway, now I understand the motivation behind it and I think that the ideas behind it are good. But nevertheless, for simpler applications or those without individual design guidelines I prefer semantic CSS because I still think...

"WTF, is this verbose!"

Yes. I think Tailwind is REALLY verbose compared to semantic CSS. Let's take a common component, like a blue button ('primary'):

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

<!-- Bootstrap 5.x -->
<button class="btn btn-primary">
  Button
</button>

From my point of view, having something like the TailwindCSS button in my markdown makes me crazy. And since this is an 'simple' component, other things are a lot more bloated. And now imagine I can't extract components like in React easily... the markup is a mess. And sure I can extract smaller classes that encapsluate those utilities, but then we are back using semantic CSS. So this is really something I dislike in TailwindCSS.

"It feels inconsistent"

Everytime when I work with Tailwind's Flexbox utilities, I've the feeling that some of the classes names are inconsistent. Most of the time I stumble over align-* and item-*, whereas the first one 'translates' to vertical-align-attribute, a style for inline or table-cell boxes, and the latter one to my desired align-items-attribute. However, at least Tailwind is consistent inside the Flexbox 'boundary', so align-content is the content-* Tailwind class.

Nevertheless, I'm unconfortable with some of those decisions and prefer the plain CSS attributes.

"Why is class XY not working?!"

Another point I find difficult using Tailwind is to determine, why some class might not work as expected. In my experience, this had most of the time the following reasons:

1. The Tailwind processor did not recognize that I use a specific class inside the markup and it was not put into the output file.
2. A bit more difficult to find: Someone's overwritten classes inside the tailwind.config and this disabled the class.

Sure those things can happen and they're easy to fix or work around as soon I'm aware of them, but to have these error sources alone is something that makes me dislike Tailwind.

Conclusion

As you can see / hear, I'm not really convinced from Tailwind. It has some good ideas, but from a user's perspective I find it to verbose, bloated and complex for most of my use-cases. But I think that, for everyone who needs the freedom TailwindCSS and its themeing etc. offers, it is a good choice to go with. Personally, I'll stick to Bootstrap and semantic CSS for the next time.