I’ve got a “love-hate” relationship with Tailwind CSS.
On the mindset front, I like the utility-first approach, but I can’t seem to get by with long class strings or adding additional complexity to my build setup.
As for the actual experience — it’s great! Very productive, easy-to-use, and makes me forget all my “imaginary” nitpicks. However, the difficulties with class composition (different Tailwind utilities don’t always override the others as intended), slow build times, and laggy CSS debugging in the browser’s dev tools drive me nuts.
But even with all those pros and cons, I still ended up using Tailwind for my latest product — CodeWrite (blogging tool for developers) — and have enjoyed the experience so far. Even to a point where I created my own tools for dealing with class composition, only to continue using it!
With that said, that doesn’t mean that I didn’t look for alternatives. The problem is — there aren’t that many. So few, in fact, that it’s hard to find another good list of “top X Tailwind CSS alternatives” (I didn’t know that was even possible).
However, I did find some — 4, to be precise. Those that I truly deemed worthy alternatives to Tailwind CSS. All of them share a similar utility-first ideology but also some unique features. Let’s check them out!
Tachyons
Tachyons holds a special place on this list, as it predates even Tailwind!
It’s based on the same utility-first principle but is much more focused and strict in its design choices. This does result in less available utilities, but still, a complete package that you can use to achieve a lot while sitting at 14KB min+gzipped without any compilation step required!
Now, this strict design, while beneficial in some ways, also has some drawbacks. As authors view the framework as “feature-complete” and cut off the “PR noise”, the core repo activity is rather small, leaving some to believe if it’s still maintained.
