UnoCSS, a TailwindCSS alternative

What is UnoCSS?

UnoCSS is an atomic CSS engine which is designed to be flexible and extensible. This makes the core is extremely lightweight (~6kb) because all the CSS utilities are provided via presets.

Comparing UnoCSS with TailwindCSS

TailwindCSS

TailwindCSS JIT engine works like a massive pre-made dictionary:

• Startup: When you start your dev server, it loads its entire core into memory. This core is a massive dictionary of every possible utility class it supports and its corresponding CSS.
• Scanning: It watches your content files which you had already specified in tailwind.config.js for class strings.
• Lookup: When you add mt-4 to your element class, the engine sees the string mt-4.
• Find & Generate: It looks up mt-4 in its massive dictionary. It finds the entry: mt-4 = margin-top: 1rem; then generates CSS and injects it.

The slowness comes from loading and searching in that massive dictionary.

UnoCSS

UnoCSS engine doesn’t have a dictionary in it core, it generates CSS on-demand:

• Startup: When you start your dev server, UnoCSS loads only the small rules from your chosen presets. For example, preset-wind4 gives it a rule: “If you see a string that looks like mt-{number}, the rule is margin-top: {number / 4}rem;”.
• Scanning: It watches your files for class strings.
• Match & Generate: When you add mt-4 to your element class, unlike TailwindCSS, UnoCSS does not do the searching
• Apply Rule: It tests the string mt-4 against its list of rules. It quickly finds a match with the mt-{number} rule and generates the CSS by applying the rule’s logic: margin: 4 / 4 = 1rem;.

By doing this way, UnoCSS saves a lot of time searching.

More than an atomic CSS engine

Performing TailwindCSS’s job is just one of the many jobs that UnoCSS can do:

• @unocss/preset-icons: allows you to use any icons in UnoCSS. No more setting up CDN or install icons packages.
• @unocss/preset-web-fonts: allows you to use web fonts from Google Font, coolLabs Fonts, etc. without setting up them manually.
• @unocss/preset-attributify: helps you writing classnames ergonomically.
• and more.