はじめに
正直なところ、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>
まとめ
UnoCSSは、Tailwind CSSの良いところを継承しつつ、さらなる高速化と柔軟性を実現したアトミックCSSエンジンです。
個人的に特に気に入っているポイントをまとめると:
- Tailwind JITの5倍という圧倒的な速度
- 6kbという軽量さとゼロ依存
- Attributifyモードによる可読性向上
- 10万以上のアイコンをCSS一発で使える便利さ
- プリセット設計による柔軟なカスタマイズ性
「Tailwindで十分じゃない?」という声もあると思います。正直、小規模プロジェクトならそれでも全然問題ないです。ただ、ビルド速度が気になる大規模プロジェクトや、より細かいカスタマイズをしたい場合には、UnoCSSの恩恵を実感できると思います。
コスパ的にも学習コストは低め(Tailwindの知識がそのまま使える)なので、興味があればぜひ試してみてください。