# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

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

---
Source: https://tokrepo.com/en/workflows/unocss-instant-demand-atomic-css-engine-89cabb3a
Author: AI Open Source