unocss

UnoCSS は、柔軟で拡張可能に設計されたインスタントなアトミック CSS エンジンです。コアは意見を持たない設計になっており、すべての CSS ユーティリティはプリセット経由で提供されます。これは Tailwind CSS のスーパーセットであるため、基本的な構文の使用にあたって Tailwind の知識を再利用できます。

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

このスキルは UnoCSS v66.10.5 に基づいており、2026-09-25 に生成されました。

コア

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

プリセット

メインプリセット

トピック	説明	リファレンス
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 インテグレーション	Vite で UnoCSS を設定する方法と、フレームワーク固有のヒント	integrations-vite
Nuxt インテグレーション	Nuxt アプリケーション向けの UnoCSS モジュール	integrations-nuxt