UnoCSS
An instant, on-demand atomic CSS engine with a fully configurable utility rule system
UnoCSS is an atomic CSS engine that generates utility classes on demand as it scans source files, built to be framework-agnostic and fully customizable, with presets that can replicate the utility sets of Tailwind CSS, Windi CSS, and other…
Definition
UnoCSS is an atomic CSS engine that generates utility classes on demand as it scans source files, built to be framework-agnostic and fully customizable, with presets that can replicate the utility sets of Tailwind CSS, Windi CSS, and other systems.
Overview
UnoCSS was built by the creator of Vite and Vitest, Anthony Fu, with a specific design goal: make an atomic CSS engine that has no default set of utilities baked in, and instead treat utility rules as data that can be defined, extended, or entirely replaced through presets. Where Tailwind ships with a fixed (if configurable) set of utility classes, UnoCSS's core is a rule-matching engine with nothing pre-registered; the actual `flex`, `pt-4`, or `text-lg` classes come from a preset — most commonly `@unocss/preset-wind`, which replicates Tailwind's utility naming conventions closely enough that many Tailwind projects can migrate with minimal class-name changes. This preset-based architecture is UnoCSS's main differentiator: because rules are just functions mapping a class name pattern to CSS output, teams can write fully custom utility systems, mix multiple presets (for example, Tailwind-style utilities alongside attributify mode, which lets utilities be written as HTML attributes instead of stacked class names), or use presets that replicate icon libraries by generating CSS directly from SVG icon sets referenced by class name. UnoCSS is also frequently cited for build performance, benchmarking faster generation times than Tailwind in several independent comparisons, in part because of its on-demand, rule-matching approach rather than pre-generating and then purging a large utility set. UnoCSS integrates with Vite, Webpack, Rollup, and other bundlers via plugins, and works with any frontend framework since its output is plain CSS. Because of its close compatibility with Tailwind's class-naming conventions through the wind preset, it's often adopted specifically as a faster, more flexible drop-in alternative for teams already writing Tailwind-style markup, though projects that build fully custom design systems can equally start from UnoCSS's bare rule engine and define their own utility vocabulary from scratch.
Key Features
- Rule-matching engine with no built-in utilities — behavior comes entirely from presets
- Tailwind-compatible preset (preset-wind) for near drop-in migration from Tailwind
- Attributify mode: write utilities as HTML attributes instead of class-name strings
- On-demand generation of only the CSS actually used, computed as source files are scanned
- Icon preset that generates CSS icons directly from popular SVG icon sets
- Framework-agnostic, integrating via plugins for Vite, Webpack, Rollup, and others
- Benchmarked faster generation than Tailwind CSS in several independent comparisons
- Created by Anthony Fu, also known for Vite, Vitest, and VueUse
Use Cases
Alternatives
History
UnoCSS is an instant, on-demand atomic (utility) CSS engine created by Anthony Fu — a core Vue and Vite contributor and co-author of Windi CSS — in late 2021. The idea grew from his work on the Vitesse Vite starter and a desire to "reimagine atomic CSS" from the ground up after Tailwind's just-in-time engine showed the value of on-demand generation. UnoCSS is deliberately an engine rather than a framework: it ships no core utilities, and all functionality comes from presets and inline configuration, which makes it highly customizable. Its design avoids heavy parsing and AST work, giving it very fast, on-demand style generation, and it integrates tightly with the Vite ecosystem.
Sources
- UnoCSS — official website · as of 2026-07-17
- Anthony Fu — "Reimagine Atomic CSS" · as of 2026-07-17