tailwind

コミュニティ版 Tailwind CSS v4 のベストプラクティス

Tailwind CSS v4 アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 44 のルールを収録し、影響度に基づいて優先順位を付け、自動リファクタリングとコード生成の指針を示します。

適用するタイミング

次の場合に、これらのガイドラインを参照してください。

• Tailwind CSS v4 のビルドツール（Vite プラグイン、PostCSS、CLI）を設定するとき
• v4 の CSS ファーストのアプローチを使ってスタイルを記述または移行するとき
• CSS バンドルサイズとビルドパフォーマンスを最適化するとき
• ブレークポイントやコンテナークエリを使ったレスポンシブデザインを実装するとき
• @theme ディレクティブとデザイントークンを使ってテーマを設定するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
1	ビルド設定	重大	build-
2	CSS 生成	重大	gen-
3	バンドル最適化	高	bundle-
4	ユーティリティパターン	高	util-
5	コンポーネントアーキテクチャ	中〜高	comp-
6	テーマとデザイントークン	中	theme-
7	レスポンシブと適応型	中	resp-
8	アニメーションとトランジション	低〜中	anim-

クイックリファレンス

1. ビルド設定（重大）

• build-vite-plugin - PostCSS より Vite プラグインを使用する
• build-css-import - @tailwind ディレクティブより CSS のインポートを使用する
• build-content-detection - コンテンツの自動検出を活用する
• build-node-version - 最適なパフォーマンスのため Node.js 20 以降を使用する
• build-postcss-simplify - 冗長な PostCSS プラグインを削除する
• build-cli-package - 正しい CLI パッケージを使用する

2. CSS 生成（重大）

• gen-css-first-config - JavaScript より CSS ファーストの設定を使用する
• gen-avoid-theme-bloat - テーマ変数を過剰に増やさない
• gen-oklch-colors - 鮮やかな色には OKLCH 色空間を使用する
• gen-utility-directive - カスタムユーティリティには @utility を使用する
• gen-dynamic-utilities - 動的なユーティリティ値を使用する
• gen-css-variable-syntax - CSS 変数の参照には括弧を使用する

3. バンドル最適化（高）

• bundle-remove-unused-plugins - 組み込みプラグインを削除する
• bundle-avoid-preprocessors - Sass／Less プリプロセッサを避ける
• bundle-css-minification - 本番環境で CSS の圧縮を有効にする
• bundle-avoid-cdn-production - 本番環境で Play CDN を避ける
• bundle-split-critical-css - 初回レンダリング用にクリティカル CSS を抽出する

4. ユーティリティパターン（高）

• util-renamed-utilities - 名前が変更されたユーティリティクラスを使用する
• util-important-modifier - 末尾に付ける Important 修飾子を使用する
• util-variant-stacking - 左から右へのバリアントの積み重ねを使用する
• util-explicit-colors - ボーダーとリングの色を明示的に指定する
• util-opacity-modifier - スラッシュ形式の不透明度修飾子を使用する
• util-gradient-via-none - via-none を使用してグラデーションの色の停止位置をリセットする

5. コンポーネントアーキテクチャ（中〜高）

• comp-avoid-apply-overuse - @apply の過剰な使用を避ける
• comp-reference-directive - CSS Module との統合に @reference を使用する
• comp-utility-file-scope - ユーティリティファイルのスコープを理解する
• comp-smart-sorting - スマートなユーティリティの並べ替えを活用する
• comp-container-customize - @utility でコンテナーをカスタマイズする
• comp-custom-variant - カスタムバリアントの定義に @custom-variant を使用する

6. テーマとデザイントークン（中）

• theme-semantic-tokens - 意味に基づいたデザイントークン名を使用する
• theme-dark-mode-class - 制御しやすいクラスベースのダークモードを使用する
• theme-prefix-variables - 変数の名前空間にプレフィックスを使用する
• theme-runtime-variables - 実行時 CSS 変数を活用する
• theme-color-scheme - ネイティブのダークモードには color-scheme を設定する
• theme-inline-static - 変数を制御するために @theme inline と @theme static を使用する

7. レスポンシブと適応型デザイン（中）

• resp-mobile-first - モバイルファーストのレスポンシブデザインを採用する
• resp-container-queries - コンポーネント単位のレスポンシブ対応にコンテナークエリを使用する
• resp-custom-breakpoints - @theme でカスタムブレークポイントを定義する
• resp-hover-capability - タッチ操作に適したインタラクションのため、hover と active を組み合わせる
• resp-logical-properties - RTL 対応に論理プロパティを使用する

8. アニメーションとトランジション（低〜中）

• anim-gpu-accelerated - GPU アクセラレーション対応の transform プロパティを使用する
• anim-starting-style - 表示時のアニメーションに @starting-style を使用する
• anim-gradient-interpolation - OKLCH によるグラデーション補間を使用する
• anim-3d-transforms - 組み込みの 3D transform ユーティリティを使用する

使用方法

詳しい説明やコード例については、各リファレンスファイルを参照してください。

• セクションの定義 - カテゴリの構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

完全版の統合ドキュメント

すべてのルールを展開した完全なガイドについては、AGENTS.md を参照してください。

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールを含む完全版の統合ガイド
references/_sections.md	カテゴリの定義と順序
assets/templates/_template.md	新しいルールのテンプレート
metadata.json	バージョンとリファレンス情報