UnoCSS — Instant On-Demand Atomic CSS Engine

What UnoCSS Does

• Atomic CSS engine — generate utilities on-demand
• Custom rules — define rules with regex + dynamic generators
• Presets — Wind (Tailwind-like), Mini, Attributify, Icons, Typography, Web Fonts
• Variants — hover:, dark:, lg:, custom variants
• Shortcuts — combine utilities into named classes
• Inspector — browser UI to debug generated CSS
• No parsing — scans source as text, not AST

Architecture

No PostCSS, no AST. UnoCSS scans source files as raw text using configurable extractors, matches against rules (regex), generates CSS on-the-fly. Unmatched classes are silently ignored (zero noise).

Self-Hosting

Build-time tool. Vite, Webpack, Astro, Nuxt, SvelteKit, Vue CLI integrations.

Key Features

• 5x faster than Tailwind JIT
• Fully customizable engine
• Tailwind-compatible preset (Wind)
• Attributify mode (<div border="2 red">)
• Pure CSS icons preset
• Variant groups (hover:(bg-red text-white))
• Inspector dev tool
• Zero config (presets handle defaults)

Comparison

FAQ

Q: Can it directly replace Tailwind? A: With presetWind enabled, most Tailwind classes work directly. A few Tailwind plugins need to be rewritten.

Q: What is Attributify? A: It lets you write utilities as HTML attributes: <div border="2 red" p="4">. Cleaner source code.

Q: How do I use the icon preset? A: i-mdi-home, i-tabler-user — icons are fetched from Iconify automatically and inlined as pure CSS (no JS).

Sources & Credits

• Docs: https://unocss.dev
• GitHub: https://github.com/unocss/unocss
• License: MIT