# 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.

## Install

Save in your project root:

## Quick Use

```bash
npm i -D unocss
```

```ts
// vite.config.ts
import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [UnoCSS()],
});
```

```ts
// main.ts
import "virtual:uno.css";
```

```html
<!-- 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.

- **Repo**: https://github.com/unocss/unocss
- **Stars**: 18K+
- **Language**: TypeScript
- **License**: MIT

## 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

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

---
Source: https://tokrepo.com/en/workflows/89cabb3a-356f-11f1-9bc6-00163e2b0d79
Author: AI Open Source