tailwind

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

Tailwind CSS v4 の8カテゴリにわたる44のルールです。影響度の高い順に並べ、自動リファクタリングとコード生成の指針として活用できます。

適用する場面

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

基本設定（Bun、Vite）

bun add tailwindcss @tailwindcss/vite   # PostCSS projects: @tailwindcss/postcss

/* src/index.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-brand: oklch(0.55 0.21 260);
}

tailwind.config.* も theme.extend も使いません。設定、トークン、プラグイン、バリアントは CSS に記述します。shadcn/ui のトークン設定（@theme inline）については、shadcn スキルを参照してください。

優先度別ルールカテゴリ

優先度	カテゴリ	影響度	プレフィックス
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 でコンテナーをカスタマイズする
• 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 - タッチ操作に適したインタラクションにはホバーとアクティブを組み合わせる
• resp-logical-properties - RTL 対応には論理プロパティを使用する

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

• anim-gpu-accelerated - GPU で高速化される transform プロパティを使用する
• anim-starting-style - 登場時のアニメーションには @starting-style を使用する
• anim-gradient-interpolation - OKLCH のグラデーション補間を使用する
• anim-3d-transforms - 組み込みの 3D transform ユーティリティを使用する

使用方法

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

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

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルールのテンプレート