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:、レスポンシブなどのバリエーションを適用する	core-variants
抽出	UnoCSS がソースコードからユーティリティを抽出する方法	core-extracting
セーフリストとブロックリスト	特定のユーティリティを強制的に含める、または除外する	core-safelist
レイヤーとプリフライト	CSS レイヤーの順序と生 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 などのウェブフォントを簡単に統合する	preset-web-fonts
Preset Tagify	HTML タグ名としてユーティリティを使用する	preset-tagify
Preset Rem to Px	ユーティリティの rem 単位を px に変換する	preset-rem-to-px

トランスフォーマー

トピック	説明	リファレンス
Variant Group	共通のプレフィックスを持つユーティリティをグループ化する省略形	transformer-variant-group
ディレクティブ	CSS ディレクティブ：@apply、@screen、theme()、icon()	transformer-directives
Compile Class	複数のクラスを単一のハッシュ化されたクラスにコンパイルする	transformer-compile-class
Attributify JSX	JSX／TSX で値のない attributify に対応する	transformer-attributify-jsx

統合

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