tailwind

Tailwind Labs Tailwind CSS v4 のベストプラクティス

Tailwind Labs がメンテナンスする、Tailwind CSS v4 アプリケーション向けの包括的なパフォーマンス最適化ガイドです。影響度の高い順に優先順位付けされた 8 カテゴリ、42 個のルールを収録し、自動リファクタリングとコード生成を支援します。

適用する場面

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

• 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 Plugin を使用する
• 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 モジュールとの統合には @reference を使用する
• comp-utility-file-scope - ユーティリティファイルのスコープを理解する
• comp-smart-sorting - スマートなユーティリティの並べ替えを活用する
• comp-container-customize - @utility でコンテナをカスタマイズする

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

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

7. レスポンシブと適応（中）

• resp-mobile-first - モバイルファーストのレスポンシブデザインを使用する
• resp-container-queries - コンポーネント単位のレスポンシブ対応にはコンテナクエリを使用する
• resp-custom-breakpoints - @theme でカスタムブレークポイントを定義する
• resp-hover-capability - タッチデバイスでのホバー動作を理解する
• 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	バージョンとリファレンス情報