unocss

UnoCSS は、柔軟性と拡張性を重視して設計された、即時利用可能なアトミック CSS エンジンです。コアには特定の方針がなく、すべての CSS ユーティリティはプリセットを通じて提供されます。Tailwind CSS の上位互換なので、基本的な構文の使い方には、これまでの Tailwind の知識を活用できます。

重要： UnoCSS コードを書く前に、エージェントはプロジェクトルートにある uno.config.* または unocss.config.* ファイルを確認し、利用可能なプリセット、ルール、ショートカットを把握してください。プロジェクトのセットアップが不明確な場合は、attributify モードやその他の高度な機能を避け、基本的な class の使用にとどめてください。

このスキルは UnoCSS 66.x に基づいており、2026-01-28 に生成されました。

コア

トピック	説明	リファレンス
設定	設定ファイルのセットアップとすべての設定オプション	core-config
ルール	CSS ユーティリティを生成する静的ルールと動的ルール	core-rules
ショートカット	複数のルールを単一の省略形にまとめる	core-shortcuts
テーマ	色、ブレークポイント、デザイントークンのテーマシステム	core-theme
バリアント	hover:、dark:、レスポンシブなどのバリエーションをルールに適用する	core-variants
抽出	UnoCSS がソースコードからユーティリティを抽出する方法	core-extracting
セーフリストとブロックリスト	特定のユーティリティを強制的に含める、または除外する	core-safelist
レイヤーとプリフライト	CSS レイヤーの順序付けと生の CSS の挿入	core-layers

プリセット

メインプリセット

トピック	説明	リファレンス
Preset Wind3	Tailwind CSS v3／Windi CSS 互換のプリセット（最も一般的）	preset-wind3
Preset Wind4	モダンな CSS 機能に対応した Tailwind CSS v4 互換のプリセット	preset-wind4
Preset Mini	カスタムビルド向けの必須ユーティリティを備えた最小限のプリセット	preset-mini

機能プリセット

トピック	説明	リファレンス
Preset Icons	任意のアイコンセットで Iconify を使用した純粋な CSS アイコン	preset-icons
Preset Attributify	class の代わりに HTML 属性でユーティリティをグループ化する	preset-attributify
Preset Typography	タイポグラフィのデフォルト設定用の prose クラス	preset-typography
Preset Web Fonts	Google Fonts などの Web フォントを簡単に統合する	preset-web-fonts
Preset Tagify	HTML タグ名としてユーティリティを使用する	preset-tagify
Preset Rem to Px	ユーティリティの rem 単位を px に変換する	preset-rem-to-px

トランスフォーマー

トピック	説明	リファレンス
バリアントグループ	共通のプレフィックスを持つユーティリティをグループ化する省略形	transformer-variant-group
ディレクティブ	CSS ディレクティブ：@apply、@screen、theme()、icon()	transformer-directives
クラスのコンパイル	複数のクラスを1つのハッシュ付きクラスにコンパイルする	transformer-compile-class
Attributify JSX	JSX／TSX で値のない attributify をサポートする	transformer-attributify-jsx

統合

トピック	説明	リファレンス
Vite 統合	UnoCSS を Vite とセットアップする方法と、フレームワーク固有のヒント	integrations-vite
Nuxt 統合	Nuxt アプリケーション向け UnoCSS モジュール	integrations-nuxt