Community Tailwind CSS v4 ベストプラクティス

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

適用する場合

以下の場合にこのガイドラインを参照してください：

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

ルールカテゴリー（優先度順）

優先度	カテゴリー	影響度	プレフィックス
1	ビルド設定	CRITICAL	build-
2	CSS生成	CRITICAL	gen-
3	バンドル最適化	HIGH	bundle-
4	ユーティリティパターン	HIGH	util-
5	コンポーネント設計	MEDIUM-HIGH	comp-
6	テーミング & デザイントークン	MEDIUM	theme-
7	レスポンシブ & 適応型	MEDIUM	resp-
8	アニメーション & トランジション	LOW-MEDIUM	anim-

クイックリファレンス

1. ビルド設定（CRITICAL）

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

2. CSS生成（CRITICAL）

• gen-css-first-config - JavaScriptよりCSS-First設定を使用する
• gen-avoid-theme-bloat - 過度なテーマ変数を避ける
• gen-oklch-colors - 鮮やかな色にOKLCHカラースペースを使用する
• gen-utility-directive - カスタムユーティリティに@utilityを使用する
• gen-dynamic-utilities - 動的ユーティリティ値を使用する
• gen-css-variable-syntax - CSS変数参照に括弧を使用する

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

• 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. ユーティリティパターン（HIGH）

• util-renamed-utilities - 名前変更されたユーティリティクラスを使用する
• util-important-modifier - 末尾のimportantモディファイアを使用する
• util-variant-stacking - 左から右へのバリアントスタッキングを使用する
• util-explicit-colors - 明示的なボーダーとリングカラーを使用する
• util-opacity-modifier - スラッシュ不透明度モディファイアを使用する
• util-gradient-via-none - グラデーション停止をリセットするにはvia-noneを使用する

5. コンポーネント設計（MEDIUM-HIGH）

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

6. テーミング & デザイントークン（MEDIUM）

• 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. レスポンシブ & 適応型（MEDIUM）

• resp-mobile-first - モバイルファーストレスポンシブデザインを使用する
• resp-container-queries - コンポーネントレベルのレスポンシブにコンテナクエリを使用する
• resp-custom-breakpoints - @themeでカスタムブレークポイントを定義する
• resp-hover-capability - タッチフレンドリーなインタラクション用にhoverとactiveをペアにする
• resp-logical-properties - RTLサポート用に論理プロパティを使用する

8. アニメーション & トランジション（LOW-MEDIUM）

• anim-gpu-accelerated - GPU高速化トランスフォームプロパティを使用する
• anim-starting-style - エントリアニメーションに@starting-styleを使用する
• anim-gradient-interpolation - OKLCHグラデーション補間を使用する
• anim-3d-transforms - 組み込み3Dトランスフォームユーティリティを使用する

使い方

詳細な説明とコード例については、個々のリファレンスファイルを読んでください：

• セクション定義 - カテゴリー構造と影響度レベル
• ルールテンプレート - 新しいルール追加用テンプレート

完全版コンパイル済みドキュメント

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

リファレンスファイル

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