Why you should pick UnoCSS over Tailwind

It's not a secret that TailwindCSS is a fan favourite (80% retention and over 40% usage rate) in the industry and it's a framework that also doesn't slow down when it comes to keeping up with developments in the ecosystem and new features being added and supported for CSS with a very talented team behind it.

However we've switched to using UnoCSS as a default for every one of our projects and we're going to try to convince you to try it out if nothing else!

The same but better

Right of the bat, you don't need to change anything about your workflow or muscle memory for the class utilities or default config. You just have to install a different VS Code extension, add a base config and off you go.

UnoCSS comes with a Windi preset which is loosely based on the Tailwind configuration so you get to keep all your existing default values.

That said we're not doing a 1:1 comparison of the full feature coverage here, but we'll go through the caveats further down below.

. . .

Try it out risk free via the online playground!

A cool ecosystem

UnoCSS calls plugins "presets" and these presets can pretty much do anything from adding a base set of classes to essentially building out full on functionality.

Note: we're pulling most of these examples from the official documentation.

Icons

The icons preset provides you a very easy to use utility to instantly add icons from pretty much any of the most popular icon libraries. If you have a custom icon library or you want to use one that's not officially supported then this preset also exposes for you the functions to add your own library into the mix.

1<!-- A basic anchor icon from Phosphor icons -->
2<div class="i-ph-anchor-simple-thin" />
3<!-- An orange alarm from Material Design Icons -->
4<div class="i-mdi-alarm text-orange-400" />
5<!-- A large Vue logo -->
6<div class="i-logos-vue text-3xl" />
7<!-- Sun in light mode, Moon in dark mode, from Carbon -->
8<button class="i-carbon-sun dark:i-carbon-moon" />

html

Fonts

Need some common google fonts quickly added to your app? The web fonts preset has you covered!

Set your configuration of fonts to be fetched and compiled into a single class and then you can just use it. The VS Code extension is fully compatible with all of these presets as well.

1presetWebFonts({
2  provider: 'google', // default provider
3  fonts: {
4    // these will extend the default theme
5    sans: 'Roboto',
6    mono: ['Fira Code', 'Fira Mono:400,700'],
7    // custom ones
8    lobster: 'Lobster',
9    lato: [
10      {
11        name: 'Lato',
12        weights: ['400', '700'],
13        italic: true,
14      },
15      {
16        name: 'sans-serif',
17        provider: 'none',
18      },
19    ],
20  },
21})

typescript

Typography

For the times you need a quick base set of styles covered for all things related to typography such as headings, links, paragraphs, lists and more, you just need to import the typography preset.

1<article class="text-base prose prose-truegray xl:text-xl">
2  {{ markdown }}
3  <p class="not-prose">
4    Some text
5  </p>
6</article>

jsx

Community presets

UnoCSS also has a strong community with lots of presets for integrations and additional features, so make sure you check these out in case you're missing some feature coming over from Tailwind.

Unique selling points

UnoCSS has a remarkable level of flexibility when it comes to its design, extendability and speed all without having to learn a complex PostCSS API as it's all typescript!

Here we wanna cover some of the more unique selling points that Tailwind currently doesn't support on its own.

Tagify

Tagify is a preset that allows you use your utilities directly as elements, it's a weird one for sure but it's there!

1<text-red> red text </text-red>
2<flex> flexbox </flex>
3I'm feeling <i-line-md-emoji-grin /> today!

html

Attributify

Perhaps more useful than tagify, with attributify you can use utilities directly as element attributes instead of having a large class.

1<button 
2  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
3  text="sm white"
4  font="mono light"
5  p="y-2 x-4"
6  border="2 rounded blue-200"
7>
8  Button
9</button>

html

Speed!

Not the drug, though close to it, UnoCSS is way faster than WindiCSS or TailwindCSS ever were because it doesn't need to parse or understand your code. It also has zero dependencies and it's a very lightweight library.

Some caveats

There's never a smooth migration from one tool to another so this might not be easy either if you're heavily invested in Tailwind already.

It's still young

Though we've been using it in several projects without any issues and in fact even migrated one existing project away from ChakraUI entirely, it's very stable and powerful but the community is not anywhere near the size of Tailwind, this affects issues, bug finding and fixing, features and integrations.

Tailwind plugins are not supported

Currently, Tailwind's plugins are not going to be supported, likely ever, due to fundamental differences in how the libraries work and the way they are built. PostCSS is the center piece to Tailwind's core and this is not the case for Uno.

This can obviously be a deal breaker depending on how many custom plugins you might need to migrate or missing features you rely on. However we still recommend you try it out and give it a chance as it is truly an innovation and not just an imitation.

Our philosophy of regular marginal improvements

We're constantly looking at how we can improve our tech stack and therefore our offerings to our clients and partners. Sometimes this takes shape in the form of adopting new frameworks but more often is a constant review of existing assumptions and not getting complacent with the tools that we use.

In most cases, new tools offer just a 5 to 10% improvement over the previous version however over the course of a year, swapping out a couple of libraries and pushing this boundary of comfort can result in bigger improvements to either developer experience, efficiency or in some cases features.