ConfigsApr 11, 2026·1 min read

UnoCSS — Instant On-Demand Atomic CSS Engine

UnoCSS is the instant on-demand atomic CSS engine. Inspired by Tailwind/Windi but engine-first: define your own utilities, presets, and rules. 5x faster than Tailwind JIT with no parsing or AST overhead.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i -D unocss
// vite.config.ts
import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [UnoCSS()],
});
// main.ts
import "virtual:uno.css";
<!-- Use anywhere -->
<div class="flex items-center gap-4 p-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">
  Hello UnoCSS
</div>
Intro

UnoCSS is the instant on-demand atomic CSS engine by Anthony Fu (Vite, Vue, Nuxt core team). Engine-first: define your own utilities, variants, and presets. Tailwind-compatible preset included. 5x faster than Tailwind JIT.

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

Engine Approach Speed Customization
UnoCSS On-demand engine Fastest Highest
Tailwind JIT On-demand parser Fast Plugin API
Windi CSS Predecessor Fast Good (deprecated)
Panda CSS Build-time Medium Tokens-based

常见问题 FAQ

Q: 能直接替换 Tailwind 吗？ A: 启用 presetWind 后大部分 Tailwind 类直接可用。少数 Tailwind 插件需要重写。

Q: Attributify 是什么？ A: 把 utilities 写成 HTML 属性：<div border="2 red" p="4">。源码更整洁。

Q: 图标 preset 怎么用？ A: i-mdi-home、i-tabler-user，自动从 Iconify 拉取并 inline 成纯 CSS（无 JS）。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

esbuild — Extremely Fast JavaScript Bundler

esbuild is an extremely fast JavaScript/TypeScript bundler written in Go. 10-100x faster than webpack/Rollup. Powers Vite, Bun, and many modern build tools as their underlying transform engine.

AI Open Source

Redux — Predictable Global State Management for JS Apps

Redux is the original predictable state container for JavaScript apps. Modern Redux uses Redux Toolkit (RTK) which reduces boilerplate 80% and includes RTK Query for server state. Still the standard for large-scale React apps.

AI Open Source

Motion (Framer Motion) — Modern Animation Library for React & JS

Motion (formerly Framer Motion) is a modern animation library for React and JavaScript with a simple declarative API. Hardware-accelerated transforms, gestures, layout animations, and SVG morphing — all in a tiny package.

AI Open Source
◈Home🔍Search👤Me