UnoCSS Has a Free API — The Instant On-Demand Atomic CSS Engine

#performance #webdev #javascript #css

What if your CSS framework only generated the CSS you actually used — instantly, with zero config, faster than any alternative?

UnoCSS is an atomic CSS engine. Not a framework — an engine. It generates CSS on demand based on what you use.

Why UnoCSS

Instant — 5x faster than Tailwind CSS JIT
Preset system — Tailwind, Windi, Bootstrap, Tachyons presets
Fully customizable — write your own rules with regex
Attributify mode — group utilities as HTML attributes
Icons — any Iconify icon as a CSS class
Variant groups — hover:(bg-blue text-white) shorthand

Quick Start

npm install -D unocss

<!-- Tailwind-compatible by default -->
<div class="p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Hello UnoCSS
</div>

<!-- Attributify mode -->
<div p="4" bg="blue-500 hover:blue-600" text="white" rounded="lg">
  Cleaner syntax
</div>

<!-- Variant groups -->
<div class="hover:(bg-blue-600 text-lg scale-105) transition-all">
  Grouped variants
</div>

Icons as CSS

<!-- Any icon from Iconify — loaded as CSS, no JS! -->
<div class="i-mdi-github text-2xl" />
<div class="i-logos-react text-4xl" />
<div class="i-carbon-moon dark:i-carbon-sun" />

Custom Rules

// uno.config.ts
import { defineConfig } from "unocss";

export default defineConfig({
  rules: [
    [/^brand-(.+)$/, ([, c]) => ({ color: `var(--brand-${c})` })],
  ],
});

// Now use: class="brand-primary brand-accent"

Real Use Case

A Nuxt app used Tailwind. Build times were 4 seconds for CSS. After switching to UnoCSS, CSS generation dropped to 200ms. The team also added icons as CSS classes — removed 3 icon packages (40KB) from the JavaScript bundle.

When to Use UnoCSS

Projects wanting Tailwind syntax with faster builds
Teams needing custom CSS utility rules
Icon-heavy projects (icons via CSS)
Vue/Nuxt ecosystem projects

Get Started

Visit unocss.dev — open source, MIT licensed.

Need custom data pipelines or scraping solutions? Check out my Apify actors or email me at spinov001@gmail.com for custom solutions.

DEV Community