Why you should use UnoCSS instead of Tailwind

In this post, I will explain why you should use UnoCSS instead of Tailwind.

What is Tailwind? (For those who don't know)

Tailwind is a utility-first CSS framework. It provides you with a set of utility classes that you can use to style your website. It is very popular and is used by many developers.

html
<div class="bg-red-500 text-white p-4 rounded-lg">This is a card</div>

What is UnoCSS?

To understand what UnoCSS is, let me first explain WindiCSS. WindiCSS was a utility-first CSS framework like Tailwind. It was very similar to Tailwind, but it used just-in-time compilation to reduce the size of the CSS file and the build time.

Tailwind adopted this feature too and WindiCSS got discontinued. UnoCSS is the spiritual successor of WindiCSS. It is much more customizable than Tailwind and has a lot of features that Tailwind doesn't have.

Some of the features of UnoCSS are:

Presets, like preset-wind which is similar to Tailwind
Dark mode
User-defined shortcuts: btn instead of bg-red-500 border-solid border-1 border-black rounded-full
Extractors: For example, attributify lets you write bg-red-500 text-3xl instead of class="bg-red-500 text-3xl"
Interactive Docs: You can quickly look up a class or a css property
And many more

html
<div bg-red-500 text-white p-4 rounded-lg>This is a card</div>

How can I try it out?

Thanks for reading! If you have any questions or comments, comment below. I'd love to hear from you! You may also fix errors or suggest changes in the GitHub repo.

Jak2k