busirocket-tailwindcss-v4

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

Tailwind CSS v4 プロジェクトのセットアップとスタイリングのパターンです。

使用する場面

次の場合にこのスキルを使用します。

• プロジェクトに Tailwind CSS v4 をセットアップする
• Tailwind ユーティリティを使ってコンポーネントのスタイルを記述する
• カスタム CSS を抽出する場合と、ユーティリティを使う場合を判断する
• スタイルのずれを防ぎ、一貫性を維持する

必須事項（MUST）

• Tailwind は、単一のグローバル CSS エントリからインポートします：@import 'tailwindcss';
• そのグローバル CSS はルートレイアウトからインポートします。
• ほとんどのスタイルには、className の Tailwind ユーティリティを優先します。
• 大規模なカスタム CSS ファイルは避け、カスタム CSS は真にグローバルなもの（リセット、トークン）に限定します。
• 必要な場合を除き、任意の値の多用は避け、一貫性のあるトークンを優先します。

クラス戦略

• クラス文字列が読みにくくなった場合：
  • 小規模なプレゼンテーション用コンポーネントを抽出します。
  • または、大規模なカスタム CSS を考案する代わりに、components/<area>/... のラッパーを抽出します。

ルール

セットアップ

• tailwind-setup - Tailwind CSS v4 のセットアップ（単一のグローバル CSS インポート）

クラス戦略

• tailwind-class-strategy - ユーティリティを優先し、必要に応じてコンポーネントを抽出する
• tailwind-avoid-drift - スタイルのずれを避ける（カスタム CSS をグローバルに保ち、トークンを優先する）

順序

• tailwind-css-ordering - CSS の順序はインポート順によって決まります

関連スキル

• busirocket-react - コンポーネント抽出のパターン

使用方法

詳しい説明とコード例については、個別のルールファイルを参照してください。

rules/tailwind-setup.md
rules/tailwind-class-strategy.md
rules/tailwind-avoid-drift.md

各ルールファイルには次の内容が含まれています。

• 重要な理由の簡単な説明
• コード例（正しいパターンと誤ったパターン）
• 追加の背景情報とベストプラクティス