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 プラグインを使用する
• 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 ユーティリティを使用する

使用方法

まず、プロジェクトのルートで実行します。

npx -y @pymodel/react-frontend-skills detect                 # installed vs. targeted versions
npx -y @pymodel/react-frontend-skills scan --skill tailwind  # deprecated APIs → rule IDs

上記のルールのうちタスクに該当するもの、および scan で検出された各項目について、references/<rule-id>.md を読み、重要な理由と、誤ったコードと正しいコードを確認します。