Top 4 Tailwind CSS alternatives for 2021
Tags: webdev, tailwindcss, css, react
Published: 2021-03-29 09:44:51

I’ve got a “love-hate” relationship with **[Tailwind CSS](https://tailwindcss.com/)**.

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](https://codewrite.io) (*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](https://tachyons.io/)
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hubhgw30ddw95eocruc.png" alt="Tachyons landing page"/>
<figcaption>Tachyons landing page</figcaption>
</figure>
**Tachyons** holds a special place on this list, as it [predates](https://github.com/tachyons-css/tachyons/commit/97bbc7b191fa9fac27aaa9d2f5e4d607b9f2507e) even [Tailwind](https://github.com/tailwindlabs/tailwindcss/commit/421c1b0d7d121f94dac4c2d2534830aba0b0bff1)!

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](https://bundlephobia.com/result?p=tachyons@4.12.0) without any compilation step required!

Now, this strict design, while beneficial in some ways, also has some drawbacks. As authors [view the framework as](https://github.com/tachyons-css/tachyons/issues/645) *[“feature-complete”](https://github.com/tachyons-css/tachyons/issues/645)* and cut off the “PR noise”, the core repo activity is rather small, leaving some to believe [if it’s still maintained](https://github.com/tachyons-css/tachyons/issues/689).

Don’t get me wrong - Tachyons is still developed, especially in regards to parts other than the core. For example, recently, the [config generator](https://github.com/tachyons-css/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](https://windicss.org/)
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xbxoiuziucfglpyzowk.png" alt="Windi CSS landing page"/>
<figcaption>Windi CSS landing page</figcaption>
</figure>
**Windi CSS**, in contrast to Tachyons, is a very fresh framework. Started in the late [December of 2020](https://github.com/windicss/windicss/commit/27fe4b198478ad5e9247c0f958ee02c827a60280), 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](https://windicss.org/guide/features.html#%F0%9F%8E%B3-utility-groups) or [dynamically-generated utilities](https://windicss.org/guide/features.html#%F0%9F%A4%96-auto-inferred-variables-and-variants).

Now, Windi CSS still requires additional build setup, but thanks to [ready integrations](https://windicss.org/guide/#integrations-%F0%9F%92%BF) 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](https://xstyled.dev/)
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae119vvgnqiqbi0hhibj.png" alt="XStyled landing page"/>
<figcaption>XStyled landing page</figcaption>
</figure>
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](https://styled-components.com/)* or *[emotion](https://emotion.sh/)*, 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](https://areknawo.com/tailwind-jsx-and-class-composition/).

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](https://chakra-ui.com/)
<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jwdy88symk2oac7ypc3.png" alt="Chakra UI landing page"/>
<figcaption>Chakra UI landing page</figcaption>
</figure>
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](https://vue.chakra-ui.com/) 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](https://chakra-ui.com/docs/features/the-sx-prop) `sx` [prop](https://chakra-ui.com/docs/features/the-sx-prop) for using your utilities as a single object prop with additional capabilities, better **TypeScript support** with [special typings generation tool](https://chakra-ui.com/docs/theming/advanced#theme-typings) 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](https://twitter.com/areknawo), [Facebook](https://www.facebook.com/areknawoblog), or through [my newsletter](https://areknawo.com#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**](https://codewrite.io) with its great editor, smooth Grammarly integration, and "one-click publishing". Try it for free, and use the code `first100` to get **20% off** your subscription (only **$2.40/month**, or **$24/year**!)