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.
Don’t get me wrong - Tachyons is still developed, especially in regards to parts other than the core. For example, recently, the config generator seems to get the most love.
So, I’d say Tachyons is still a good choice for minimalists (especially those who like the framework’s design philosophy) and those wanting to skip on the compilation step.
Windi CSS
Windi CSS, in contrast to Tachyons, is a very fresh framework. Started in the late December of 2020, it’s already gained a lot of attention and currently sits at respectable 1.5K GitHub stars.
What’s so great about Windi CSS? That it’s like Tailwind, just better! Windi CSS is almost fully compatible with all of Tailwind’s functionality, but on top of that, it provides additional features and has a superior compiler.
In development, instead of building the entire Tailwind utility set, it checks your code for all the utilities you actually use and bundles only those. This dramatically reduces build times, speeds up development, and allows for new features like variant groups or dynamically-generated utilities.
Now, Windi CSS still requires additional build setup, but thanks to ready integrations with popular build tools and bundlers, it shouldn’t be a problem. Also, autoprefixer-like functionality comes out-of-the-box.
So, it looks like Windi CSS is just an amazing, no-brainer solution to improve your Tailwind development experience without any drawbacks. Just drop it in, and go!
XStyled
Starting with XStyled, we’re venturing into a bit different territory - one related to React and JSX.
XStyled is a CSS-in-JS framework inspired by Tailwind, which brings your utility classes to JSX! Built on top of React and styled-components or emotion, it features the same utility classes as in Tailwind, just with a bit different naming scheme and as JSX props!
If you’re deep into React and JSX, you’ll have a lot of reasons to love XStyled. The biggest one, of course, is its “react-ish” JSX nature. But there’s also TypeScript compatibility, thus TS-powered autocompletion, and CSS-in-JS under-the-hood, which solves any composition issues you might have experience in Tailwind (all classes are generated in runtime and don’t collide with each other). I explored both of these advantages and more in one of my previous posts.
But what are the downsides to this approach? Possibly more verbose syntax, runtime performance loss due to CSS-in-JS, and the fact that you’re limited to React.
I think the choice is simple here. If you’re deep into React and feel like such API would make you more productive and is better to code with - by all means, give it a try!
Chakra UI
Being in the React and JSX mood, I have to mention Chakra UI. It’s a lot like XStyled, just more popular and with a lot of additional features!
It’s available primarily for React, but also Vue 2 and built on top of emotion (no styled-components version). Similarly to XStyled, it features style utilities as props, but arguably with a bit more succinct syntax.
On top of that, it has a special sx prop for using your utilities as a single object prop with additional capabilities, better TypeScript support with special typings generation tool for custom configs (it’s very customizable), and a whole collection of ready-to-go UI components, all extendable through JSX utility props! That’s some next-level stuff!
As for Chakra UI's downsides, they are similar to XStyled’s, just maybe with a bit better API. So, if this is the style you’re after and want a more feature-packed rather than minimalistic solution, Chakra UI is definitely for you!
Closing thoughts
So, with all the options behind us, do I personally plan on moving from Tailwind CSS in favor of any of them?
For now - no. I’ve got too used to Tailwind’s naming scheme and overall design, and I’ve got the setup is already in place. Some of the mentioned alternatives indeed provide some useful features, but there’s still only so much you can do to make a utility-first framework better. Besides, Tailwind also has some of the best documentation and the biggest community out of any mentioned alternatives.
With that said, I’ll be keeping an eye on some of those alternatives. Namely Windi CSS, and Chakra UI, as I find those two particularly interesting. Maybe I’ll even end up using one of them for my up-coming project - who knows?
But again, at least for now, I’ll stick with Tailwind.
For more web development content, follow me on Twitter, Facebook, or through my newsletter.
Thanks for reading, and happy coding!
This post was written with ease, made grammatically-correct, and cross-posted here within 1 click thanks to CodeWrite with its great editor, smooth Grammarly integration, and "one-click publishing". Try it for free, and use the code
first100to get 20% off your subscription (only $2.40/month, or $24/year!)
Top comments (7)
Worth noting that Tailwind now has a JIT compiler: github.com/tailwindlabs/tailwindcs...
Nice, didn’t know about it. Seems similar to Windi CSS, though unlike Windi it’s still experimental.
I'm testing now Chakra UI and it's amazing, very easy to use. I have too that love/hate relationship with TailwindCSS btw :D
Then there’s two of us 🙏
Hello,
thanks for this useful post.
I think that Chakra UI is not React-only: vue.chakra-ui.com/
That's a big mistake on my part - didn't see that. I've updated the description. The React version seems to receive more attention and feels a bit more refined.
Thanks, will check out both of those!