UnoCSS

UnoCSS

UnoCSS は、オンデマンドで即座に動作するアトミック CSS エンジンです。実際に使用するユーティリティクラスの CSS だけを生成します。パースも AST もスキャンも必要ありません。Tailwind CSS JIT より 5 倍高速で、minify と Brotli 適用後のサイズは約 6kb、依存関係はゼロです。

このスキルを使う場面

このスキルを使う場面…	別のものを使う場面…
ユーティリティファースト CSS をセットアップするとき	CSS をトランスパイル／圧縮するとき（Lightning CSS を使用）
UnoCSS のプリセットとルールを設定するとき	CSS ルールをリントするとき（Stylelint を使用）
Vite/Nuxt/Astro と統合するとき	Tailwind 固有のプラグインエコシステムが必要なとき
クラス名からアトミック CSS を生成するとき	従来の CSS アーキテクチャ（BEM など）を使うとき
プリセット経由で純粋な CSS アイコンを使うとき	CSS-in-JS のランタイムが必要なとき（styled-components などを使用）
Tailwind CSS をより高速な代替手段に置き換えるとき

主な機能

• 即時生成：パースや AST は不要で、正規表現によるクラス抽出を直接行います
• プリセット主導：すべてのユーティリティはプリセットから提供され、自由にカスタマイズできます
• フレームワーク非依存：Vite、Webpack、PostCSS、Nuxt、Astro、Svelte、CLI に対応しています
• 拡張可能：カスタムルール、バリアント、ショートカット、エクストラクター、トランスフォーマーに対応しています
• インスペクター：生成されたユーティリティをデバッグするための開発ツールを内蔵しています

インストール

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

# Bun
bun add -d unocss

# Standalone CLI
npm add -D @unocss/cli

Vite との統合

基本設定

// 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'

設定ファイル

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

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

Lightning CSS との併用（推奨の組み合わせ）

// 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'
  }
})

プラグインのモード

モード	用途	セットアップ
Global（デフォルト）	標準的なアプリ	エントリーファイルで import 'virtual:uno.css'
Vue-scoped	Vue コンポーネントの分離	<style scoped> ブロックに挿入します
Shadow DOM	Web Components	コンポーネントのスタイルに @unocss-placeholder を追加します
Per-module（実験的）	モジュールスコープの CSS	モジュールごとに CSS シートを作成します
Dist-chunk（実験的）	マルチページアプリ	コードチャンクごとに CSS シートを作成します

フレームワーク別のプラグイン順序

フレームワーク	UnoCSS プラグインの位置
React（Babel）	@vitejs/plugin-react の前
Svelte/SvelteKit	Svelte プラグインの前
Vue	任意の位置（デフォルトで動作します）
Solid/Preact	順序についてはドキュメントを確認してください

CLI の使用方法

# Generate CSS from source files
unocss "src/**/*.{html,tsx,vue}" -o dist/uno.css

# Multiple glob patterns
unocss "src/**/*.tsx" "pages/**/*.vue" -o dist/uno.css

# Minified output
unocss "src/**/*.tsx" -o dist/uno.css --minify

# Output to stdout (pipe-friendly)
unocss "src/**/*.tsx" --stdout

# Watch mode for development
unocss "src/**/*.tsx" -o dist/uno.css --watch

# With specific config file
unocss "src/**/*.tsx" -o dist/uno.css --config uno.config.ts

# Include preflight styles
unocss "src/**/*.tsx" -o dist/uno.css --preflights

# Use specific preset without config
unocss "src/**/*.tsx" -o dist/uno.css --preset wind4

設定

プリセット

// uno.config.ts
import {
  defineConfig,
  presetWind3,        // Tailwind CSS v3 compatible utilities
  presetIcons,        // Pure CSS icons from Iconify
  presetAttributify,  // Attributify mode (utilities as HTML attributes)
  presetTypography,   // Typography prose classes
  presetWebFonts,     // Web font loading
  presetMini,         // Minimal preset (subset of wind)
} from 'unocss'

export default defineConfig({
  presets: [
    presetWind3(),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/'
    }),
    presetAttributify(),
    presetTypography(),
    presetWebFonts({
      provider: 'google',
      fonts: { sans: 'Inter', mono: 'Fira Code' }
    })
  ]
})

Wind3 と Wind4 の比較

プリセット	互換性	備考
presetWind3()	Tailwind CSS v3	安定しており、広く使われています
presetWind4()	Tailwind CSS v4	新しく、CSS ファーストの設定に対応しています

カスタムルール

// uno.config.ts
export default defineConfig({
  rules: [
    // Static rule
    ['custom-padding', { padding: '1rem' }],
    // Dynamic rule
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) / 4}rem` })],
  ]
})

ショートカット

// uno.config.ts
export default defineConfig({
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-primary': 'btn bg-blue-500 text-white hover:bg-blue-700',
    'card': 'p-4 rounded-lg shadow bg-white dark:bg-gray-800',
  }
})

テーマ

// uno.config.ts
export default defineConfig({
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#64748b',
    },
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
    }
  }
})

セーフリスト

// uno.config.ts — pre-generate classes not found in source scanning
export default defineConfig({
  safelist: [
    'bg-red-500',
    'text-white',
    ...Array.from({ length: 5 }, (_, i) => `p-${i + 1}`)
  ]
})

レイヤー

// uno.config.ts — control CSS specificity ordering
export default defineConfig({
  layers: {
    components: -1,  // Before utilities
    default: 1,      // Utilities
    utilities: 2,    // Higher specificity utilities
  }
})

アイコンプリセット

任意の Iconify コレクションから純粋な CSS アイコンを利用できます。

# Install icon collections
npm add -D @iconify-json/mdi @iconify-json/lucide

// uno.config.ts
import { presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      }
    })
  ]
})

<div class="i-mdi-home text-2xl" />
<div class="i-lucide-settings w-6 h-6" />

インスペクター

開発中は、内蔵のインスペクターで生成された CSS を確認できます。

// main.ts
import 'virtual:uno.css'

開発サーバーで /__unocss を開くと、次の情報を含むインスペクターを確認できます。

• 生成された CSS ルール
• ファイルごとに一致したクラス
• 設定の概要

DevTools との統合

// main.ts — enable class editing in browser DevTools
import 'virtual:uno.css'
import 'virtual:unocss-devtools'

バリアントグループ

よく使うプレフィックスを短く記述できます。

<div class="hover:bg-blue-500 hover:text-white hover:font-bold" />


<div class="hover:(bg-blue-500 text-white font-bold)" />

トランスフォーマーを使って有効にします。

import { transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [transformerVariantGroup()]
})

エージェント向けの最適化

コンテキスト	コマンド
すばやく生成	unocss "src/**/*.tsx" -o uno.css --minify
標準出力（パイプ）	unocss "src/**/*.tsx" --stdout
監視モード	unocss "src/**/*.tsx" -o uno.css -w
設定を確認	プリセットとルールを確認するため、uno.config.ts を読み込みます
インポートを確認	エントリーファイルで virtual:uno.css を grep します
ユーティリティを調査	開発サーバーで /__unocss を開きます

クイックリファレンス

フラグ	エイリアス	説明
--out-file <file>	-o	出力ファイル名（デフォルト：uno.css）
--stdout		CSS を標準出力に書き込みます
--watch	-w	ファイルの変更を監視します
--minify	-m	生成された CSS を圧縮します
--config <file>	-c	設定ファイルのパス
--preflights		preflight/reset スタイルを含めます
--preset <name>		wind3 または wind4 プリセットを使用します
--debug		デバッグモードを有効にします

References

• Official docs: https://unocss.dev
• Interactive playground: https://unocss.dev/play
• Vite integration: https://unocss.dev/integrations/vite
• CLI reference: https://unocss.dev/integrations/cli
• Presets: https://unocss.dev/presets