UnoCSS入門 - Tailwindより5倍速いアトミックCSSエンジンという話

はじめに

正直なところ、Tailwind CSSで満足していたんですよ。でもUnoCSS触ってみたら、その速さと柔軟性に驚きました。

UnoCSSは「The instant on-demand atomic CSS engine」、つまり即座に動作するオンデマンド型のアトミックCSSエンジンです。Tailwind CSSやWindi CSSにインスピレーションを受けて開発されていますが、解析やAST処理を一切行わないことで驚異的なパフォーマンスを実現しています。

GitHub Stars 18.4k、393名のコントリビューター、MITライセンス。個人的には「Tailwindの良いところを取り入れつつ、さらに進化させた」という印象ですね。

この記事では、UnoCSSの特徴からインストール方法、実践的な使い方まで解説していきます。

UnoCSSとは

UnoCSSは、Anthony Fu氏が開発したアトミックCSSエンジンです。

最大の特徴は「コアにユーティリティを持たない」という設計思想。すべての機能はプリセットを通じて提供されるため、本当に必要な機能だけを選んで使えます。

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

export default defineConfig({
  presets: [
    presetUno(), // Tailwind/Windi/Bootstrap互換のデフォルトプリセット
  ],
})

この設計のおかげで、Tailwind CSS互換の書き方もできれば、完全にカスタムなユーティリティクラスも定義できます。

特徴・メリット

1. 圧倒的な速度

個人的に一番衝撃だったのがこれ。公式によると「Windi CSSやTailwind JITより5倍高速」とのこと。

解析処理やASTを使わないアーキテクチャにより、瞬時にCSSを生成します。大規模プロジェクトでビルド時間が気になっている人には特に恩恵が大きいと思います。

2. 軽量でゼロ依存

ブラウザ対応で約6kb（min+brotli）、依存関係なし。これ、意外と重要なポイントなんですよね。依存関係が少ないということは、セキュリティリスクも低いしメンテナンスも楽ということ。

3. 完全なカスタマイズ性

コアがニュートラルな設計なので、プリセットの組み合わせ次第で好きなようにカスタマイズできます。

// カスタムルールの追加例
export default defineConfig({
  rules: [
    ['m-1', { margin: '1px' }],
    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d}px` })],
  ],
})

4. Attributifyモード

これ、地味に便利なんですよ。クラス名が長くなりがちな問題を解決できます。

<!-- 従来のクラス指定 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  送信
</button>

<!-- Attributifyモード -->
<button
  bg="blue-500 hover:blue-700"
  text="white"
  font="bold"
  p="y-2 x-4"
  rounded
>
  送信
</button>

HTMLの属性としてスタイルを指定できるので、可読性が上がります。

5. アイコン統合

@unocss/preset-iconsを使えば、10万以上のアイコンをCSSとして利用できます。

<!-- Iconifyのアイコンをクラス一発で -->
<div class="i-ph-anchor-simple-thin" />
<div class="i-mdi-alarm text-orange-400" />

外部フォントやSVGスプライトを読み込む必要がないので、パフォーマンス的にも優れています。

6. VS Code拡張機能

公式のVS Code拡張があり、オートコンプリートやカラープレビューが使えます。開発体験としてはTailwind CSSと遜色ないですね。

インストール方法

2026年1月現在の最新バージョンはv66.5.12です。主要な環境ごとのインストール方法を紹介します。

Vite

npm install -D unocss

vite.config.tsに追加:

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

uno.config.tsを作成:

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  presets: [presetUno()],
})

main.tsでインポート:

import 'virtual:uno.css'

Nuxt

npm install -D @unocss/nuxt

nuxt.config.tsに追加:

export default defineNuxtConfig({
  modules: ['@unocss/nuxt'],
})

Next.js

npm install -D @unocss/webpack

next.config.jsに設定:

const UnoCSS = require('@unocss/webpack').default

module.exports = {
  webpack: (config) => {
    config.plugins.push(UnoCSS())
    return config
  },
}

CDNで試す（開発用）

とりあえず試したい場合はCDN版があります。

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

ただし本番環境ではビルドツール経由での利用を推奨します。

基本的な使い方

プリセットUnoの基本

プリセットUnoを使えば、Tailwind CSS互換の書き方ができます。

<!-- Tailwindと同じ書き方が可能 -->
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow">
  <span class="text-lg font-bold text-gray-900">タイトル</span>
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
    ボタン
  </button>
</div>

カスタムルールの定義

独自のユーティリティクラスを定義できます。

// uno.config.ts
export default defineConfig({
  rules: [
    // 静的ルール
    ['card', {
      padding: '1rem',
      'border-radius': '0.5rem',
      'box-shadow': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    }],
    // 動的ルール
    [/^text-(.+)$/, ([, color]) => ({ color })],
  ],
})

ショートカット

複数のユーティリティをまとめてエイリアス化できます。

export default defineConfig({
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-primary': 'btn text-white bg-blue-500 hover:bg-blue-700',
    'btn-secondary': 'btn text-gray-800 bg-gray-200 hover:bg-gray-300',
  },
})

<!-- 使用例 -->
<button class="btn-primary">プライマリボタン</button>
<button class="btn-secondary">セカンダリボタン</button>

Variant Groups

同じバリアント（hover、dark等）をまとめて書けます。

<!-- 従来の書き方 -->
<div class="hover:bg-gray-100 hover:font-medium hover:text-gray-900">

<!-- Variant Groups -->
<div class="hover:(bg-gray-100 font-medium text-gray-900)">

これ、地味にクラス名が短くなって読みやすくなるんですよね。

実践的なユースケース

レスポンシブなカードコンポーネント

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
  <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow">
    <img class="w-full h-48 object-cover" src="/image.jpg" alt="サムネイル" />
    <div class="p-6">
      <h2 class="text-xl font-bold text-gray-900 mb-2">記事タイトル</h2>
      <p class="text-gray-600 text-sm line-clamp-3">
        記事の説明文がここに入ります。長いテキストは3行で切り捨てられます。
      </p>
      <div class="mt-4 flex gap-2">
        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">TypeScript</span>
        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">UnoCSS</span>
      </div>
    </div>
  </div>
</div>

アイコン付きボタン

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

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({
      scale: 1.2,
      cdn: 'https://esm.sh/',
    }),
  ],
})

<button class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
  <span class="i-mdi-check" />
  保存する
</button>

<button class="flex items-center gap-2 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition-colors">
  <span class="i-mdi-delete" />
  削除
</button>

ダークモード対応フォーム

<form class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
      メールアドレス
    </label>
    <input
      type="email"
      class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:text-white outline-none transition-all"
      placeholder="example@email.com"
    />
  </div>

  <div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
      パスワード
    </label>
    <input
      type="password"
      class="w-full px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:text-white outline-none transition-all"
    />
  </div>

  <button
    type="submit"
    class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition-colors"
  >
    ログイン
  </button>
</form>