Why you should use UnoCSS instead of Tailwind
#unocss #tailwind #css #webdev
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.
<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-windwhich is similar to Tailwind
- Dark mode
- User-defined shortcuts:
bg-red-500 border-solid border-1 border-black rounded-full
- Extractors: For example,
attributifylets you write
bg-red-500 text-3xlinstead of
- Interactive Docs: You can quickly look up a class or a css property
- And many more
<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, please sign in with GitHub and comment below. I'd love to hear from you! You may also fix errors or suggest changes in the GitHub repo.
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License