UnoCSS

UnoCSS

UnoCSS is an instant on-demand atomic CSS engine. It generates only the CSS for utility classes you actually use — no parsing, no AST, no scanning. 5x faster than Tailwind CSS JIT with ~6kb min+brotli and zero dependencies.

When to Use This Skill

Core Expertise

• Instant generation: No parsing or AST — direct regex-based class extraction
• Preset-driven: All utilities come from presets, fully customizable
• Framework-agnostic: Vite, Webpack, PostCSS, Nuxt, Astro, Svelte, CLI
• Extensible: Custom rules, variants, shortcuts, extractors, transformers
• Inspector: Built-in dev tool for debugging generated utilities

Installation

# Vite project (most common)
npm add -D unocss

# Bun
bun add -d unocss

# Standalone CLI
npm add -D @unocss/cli

Vite Integration

Basic Setup

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

// main.ts - import the virtual stylesheet
import 'virtual:uno.css'

Configuration File

// uno.config.ts
import { defineConfig, presetWind3 } from 'unocss'

export default defineConfig({
  presets: [presetWind3()]
})

With Lightning CSS (Recommended Combo)

// vite.config.ts
import UnoCSS from 'unocss/vite'
import browserslist from 'browserslist'
import { browserslistToTargets } from 'lightningcss'

export default defineConfig({
  plugins: [UnoCSS()],
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  },
  build: {
    cssMinify: 'lightningcss'
  }
})