UnoCSS完全解説 - 2026年Tailwind対抗馬の次世代アトミックCSSエンジン
Tailwind CSSが2026年現在フロントエンド業界の覇権を握る中、その対抗馬として急速に勢力を伸ばしているのがUnoCSSです。Vue.js作者のEvan Youのチームから生まれたこの「次世代アトミックCSSエンジン」は、Tailwindと互換性を保ちながら革新的な機能を多数提供します。この記事ではUnoCSSの仕組み・優位点・移行戦略まで実務目線で解説します。
UnoCSSとは何か
UnoCSSは、Anthony Fu (Vite/Vue/Nuxtのコアメンバー) が2021年末に開発を始めたアトミックCSSエンジンです。「Instant On-demand Atomic CSS Engine」を公式キャッチフレーズとし、Tailwindと同様にユーティリティクラスベースの書き方を採用しています。
最大の特徴は「プリセット (Preset)」という仕組みで、Tailwind互換のプリセット (@unocss/preset-uno) を読み込むと、Tailwindのほぼ全クラスがそのまま使えます。さらにAttributify (HTML属性として書く方式) や Icons (任意のアイコンセットを直接クラスとして使用) といった独自プリセットも組み合わせ可能です。
Tailwindとの違い
1. 速度
UnoCSSは「オンデマンド」アーキテクチャを採用しており、コードに登場したクラスのみを動的にCSS生成します。Tailwind v4もJITコンパイルを採用しましたが、UnoCSSの方が依然として高速です。実測値で、大規模プロジェクト (数万行) のビルド時間がTailwindの1/3〜1/2程度になるケースが報告されています。
2. 設定の柔軟性
Tailwindは tailwind.config.js または @theme での設定が中心ですが、UnoCSSはJavaScript/TypeScriptで完全にプログラマブルです。例えば「PXからremへの自動変換ルール」を関数で記述したり、「特定パターンのクラスを動的生成」したりといった高度なカスタマイズが可能です。
3. ファイルサイズ
UnoCSSは 1MB未満のコアパッケージで動作します。Tailwindが依存パッケージ含めて10MB近いのと比べて、CIキャッシュ・ビルドキャッシュの観点でも有利です。
4. 拡張性
カスタムプリセット作成がとても簡単で、コミュニティ製の拡張が豊富です。preset-rem-to-px(rem→px変換)、preset-typography (記事スタイル)、preset-web-fonts (Googleフォント自動読込) など、痒い所に手が届くプリセットが揃っています。
4つの主要プリセット
preset-uno (Tailwind互換)
最も基本的なプリセットで、Tailwind CSSのほぼ全ユーティリティクラスを再実装しています。bg-blue-500 や flex items-center 等、Tailwindで慣れ親しんだクラスがそのまま動作します。Tailwindプロジェクトの移行先として最初に検討すべきプリセットです。
preset-attributify (属性記法)
UnoCSS独自の機能で、クラス名を「属性」として書けます。<div text="red-500 lg" font="bold" p="4"> のように、関連クラスをグループ化できます。コードが大幅に読みやすくなり、長すぎるclass属性問題を解消します。Vue/Reactのテンプレートで特に重宝されています。
preset-icons
10万種類以上のアイコンをi-mdi-heart のようなクラスとして直接埋め込めます。SVGスプライト不要、アイコンライブラリのimport不要。Iconifyのデータベース全体が使え、Material Design Icons、Heroicons、Phosphor、Tabler、Lucide など主要アイコンセットを横断的に利用可能です。
preset-web-fonts
Googleフォント・Bunny Fonts・Fontsourceから任意のフォントを設定ファイルに記述するだけで自動読込します。font-sansを「Inter」、font-monoを「JetBrains Mono」と指定すれば、自動でフェッチ・preload・CSS変数化までやってくれます。
導入の流れ
Vite + Vue/Reactプロジェクトでの導入はとても簡単です。 npm install -D unocss でインストールし、 vite.config.ts に UnoCSS() プラグインを追加するだけ。設定ファイル uno.config.ts でプリセット・ルール・ショートカットを記述します。最小構成なら30行程度で完璧に動作します。
Nuxt 3を使っている場合はさらに簡単で、@unocss/nuxt モジュールを nuxt.config.ts に追加するだけです。Nuxtチームと密接に連携しているため、SSR・Auto-import との統合が完璧です。
Tailwindからの移行戦略
既存Tailwindプロジェクトの移行を検討する場合、3段階のアプローチを推奨します。第一段階として preset-uno のみ有効化し、既存コードを動作させます。ほとんどのTailwindコードはそのまま動きます。第二段階として、 preset-icons で既存のアイコン読込ロジックを簡素化します。第三段階として、 preset-attributify を有効化し、複雑なclassを属性記法にリファクタリング。これで完全な「UnoCSSスタイル」のコードベースになります。
注意点として、Tailwind固有のプラグイン (@tailwindcss/forms 等) を多用している場合は移行コストが上がります。UnoCSSのpreset版が存在するか事前確認が必須です。
採用すべきケース・避けるべきケース
採用推奨は、Vue/Nuxt/Viteベースのプロジェクト、ビルド速度を重視する大規模プロジェクト、アイコンを大量に使うプロダクト (管理画面・SaaS)、属性記法による可読性向上を求めるチームです。
逆に、既にTailwindで安定稼働している中規模以上のプロジェクト、Next.jsのappディレクトリ (Tailwindとの親和性が高い)、チームメンバーがTailwind熟練者ばかりで「学び直し」を避けたい場合は、Tailwindを維持する方が現実的です。
UnoCSSの将来性
2026年現在、UnoCSSはVue/Nuxtエコシステム内で業界標準になりつつあります。GitHub Star数は16,000を超え、週間ダウンロード数も着実に増加中です。Anthony Fuが中心となって開発を継続しており、エコシステム全体の品質が高い状態を維持しています。
一方で、ReactエコシステムではTailwindの優位は揺るがず、特にshadcn/uiの台頭以降「TailwindでなければOK」という選択肢は減っています。フレームワーク選択次第で「TailwindかUnoCSSか」が事実上決まるという二分化が進んでいます。
本サイトのツールとの連携
UnoCSSへの移行を検討する際、本サイトのCSS → Tailwind変換ツールが役立ちます。生成されるクラスは preset-uno でそのまま動作するため、UnoCSSプロジェクトでも有効です。また、 Tailwindカラーパレット生成で作成したパレットは、UnoCSSのtheme.colors設定にもそのまま貼り付け可能です。
まとめ
UnoCSSはTailwindの「正統な後継者」というより、「異なる思想を持つ並行解」と考えるのが妥当です。Vue/Vite/Nuxtを中心とした開発者には推奨できる選択肢です。一方でReactエコシステムではTailwindの優位が確立されているため、無理に移行する必要はありません。今後5年、両者は競い合いながらアトミックCSSという概念を進化させていくと予想されます。「どちらが優れているか」より「使いこなせるか」が大切です。