unocss

UnoCSS is an atomic CSS engine built with no built-in utility set at all — every utility class it understands comes from a preset you choose to load, so the engine itself stays a tiny, general-purpose matching and generation core. It was designed for speed: rather than parsing your source into an AST and scanning for known class names, it matches tokens directly against rules, which the project positions as several times faster than Windi CSS or Tailwind’s JIT engine while shipping at roughly 6kb min+brotli with zero runtime dependencies.

On top of that engine, the umbrella unocss package bundles the official Wind (Tailwind/Windi-compatible) presets, attributify mode for grouping utilities into HTML attributes, pure-CSS icon utilities backed by Iconify, shortcuts for aliasing repeated utility combinations, and transformers for @apply-style CSS directives and variant-group shorthand. It ships first-class integrations for Vite, Webpack, PostCSS, Rollup, Nuxt, and Astro, plus a CLI, a browser-runtime build for CDN usage, a VS Code extension, and an interactive inspector for debugging generated output.

The project is maintained by Anthony Fu (Vue core team, VoidZero) and is one of the most widely adopted CSS tooling projects in the Vite/Vue/Nuxt ecosystem, with active development, frequent releases, and a large surrounding preset and integration ecosystem.

What You Get

• A dependency-free core engine (@unocss/core) that resolves rules, variants, shortcuts, and extractors with no assumptions about what utilities exist
• Official Wind presets (preset-wind3/preset-wind4) that reimplement Tailwind/Windi-compatible utility syntax on top of the engine
• Attributify mode, pure-CSS Iconify-backed icons, web fonts, typography, and legacy-compat presets, all installable independently
• Transformers for @apply CSS directives, variant-group shorthand, class compilation, and JSX attributify syntax
• First-class plugins for Vite, Webpack, Rollup, PostCSS, Nuxt, and Astro, plus a standalone CLI and a CDN runtime build
• An interactive inspector, a VS Code extension, and an ESLint plugin/config for authoring and validating utility strings

Common Use Cases

• Replacing Tailwind CSS in a Vite, Nuxt, or Astro project for faster on-demand generation without a build-time content scan
• Building a fully custom design system where the project defines its own rules and presets instead of adopting a fixed utility set
• Using attributify mode to group long utility class lists into readable HTML attributes
• Serving atomic CSS to a runtime environment (e.g. a CDN-loaded page or an MPA) via the CSS-in-JS runtime build
• Standardizing icon usage across a codebase by referencing any Iconify icon as a single utility class

Under The Hood

Architecture The engine lives in @unocss/core (packages-engine/core), centered on generator.ts’s UnoGenerator/TokenProcessor, which resolves user config (config.ts) into rules, shortcuts, variants, and extractors, then matches raw tokens against them directly rather than building an AST or scanning source with regex-per-file passes — tokens are parsed in batches (a documented, benchmark-tuned batch size) with per-token caching and a blocked-token set to avoid re-matching known misses. Presets, transformers, and framework integrations (packages-presets/*, packages-integrations/*) are separate packages that only depend on the core’s public types, so the umbrella unocss package is just a composition layer that re-exports the Wind presets, icon/attributify/typography presets, transformers, and the Vite/Webpack/Astro/PostCSS/Rollup adapters. This plugin-style layering means the core has zero knowledge of any specific utility syntax — Tailwind/Windi compatibility is entirely a preset concern.

Tech Stack The codebase is TypeScript throughout, built with tsdown per-package and orchestrated across the monorepo with Turborepo and pnpm workspaces using pnpm catalogs to pin shared dependency versions (build, testing, eslint, vue, vite catalogs, etc.). Framework integrations wrap Vite, Webpack, Rollup, PostCSS, Nuxt, and Astro directly; the docs site is a VitePress app with a live interactive playground; the VS Code extension and language-server package ship as separate workspace members.

Code Quality The root test/ directory holds dozens of Vitest suites (one per preset/transformer/integration — preset-wind4.test.ts, transformer-directives.test.ts, rollup-assets.test.ts, webpack-assets.test.ts, etc.) plus snapshot fixtures under test/__snapshots__, and test:ci chains build, tsgo typechecking, ESLint (via @antfu/eslint-config), unit tests, and a Svelte integration-test pass. CI (ci.yml, autofix.yml, release.yml, benchmark.yml) runs on every push, and package exports are validated with publint/attw (Are the Types Wrong) to catch broken type or module resolution before release.

API Design The umbrella unocss package’s exports map gives each integration its own subpath (unocss/vite, unocss/astro, unocss/webpack, unocss/preset-wind4, etc.) so consumers import only what they use without pulling in unrelated adapters, and the same preset/rule/variant primitives are reused identically whether the caller is on Vite, Webpack, or the CLI. The tradeoff is a wide public surface — dozens of presets and transformers with their own option shapes — that requires reading preset-specific docs to configure well, though the interactive docs/playground and VS Code extension mitigate the discovery cost.