tailwind

Tailwind

現在のドキュメントに加え、ローカルプロジェクトで実際に使われている Tailwind のバージョン、統合方法、デザイン規約に基づいて判断する際に、このスキルを使用します。

ワークフロー

1. Tailwind の使用状況を把握します。
   • 最も近いプロジェクトガイダンスとパッケージマニフェストを読みます。
   • tailwindcss、@tailwindcss/vite、@tailwindcss/postcss、@tailwindcss/cli、@tailwindcss/webpack、@tailwindcss/turbopack、prettier-plugin-tailwindcss、およびフレームワークパッケージのインストール済みバージョンを確認します。
   • CSS のエントリーファイル、vite.config.*、PostCSS 設定、フレームワーク設定、tailwind.config.*、クラスを組み合わせるヘルパーを調べます。
2. ユーザーが最新または現行の動作について尋ねた場合、バージョンが取得済みのスナップショットと異なる場合、または v4 の移行・設定を扱う場合は、ドキュメントを更新します。
   • 取得済みの最新バージョンのスナップショットと公式ソースへのリンクには、source-map.md を使用します。
3. 該当するリファレンスファイルを読み込みます。
   • setup-and-migration.md：インストール方法、パッケージの分割、v3 から v4 へのアップグレード、ブラウザーサポート、移行時の注意点。
   • core-utilities.md：ユーティリティクラスの組み合わせ、ソースの検出、レスポンシブデザイン、ダークモード、バリアント、任意の値、Preflight、アクセシビリティ。
   • css-directives-and-theme.md：@theme、@source、@utility、@variant、@custom-variant、@apply、@reference、@config、@plugin、および Tailwind CSS 関数。
4. 既存のプロジェクトスタイルに沿って実装します。
   • プロジェクトで現在使用されている Tailwind のメジャーバージョンと統合パッケージを優先します。
   • 完全な形式で静的に検出可能なクラス名を使います。断片を補間するのではなく、プロパティや状態をクラス文字列全体に対応付けます。
   • 一度限りの任意の値よりも、デザイントークンのユーティリティとテーマ変数を優先します。
   • ユーティリティ、テーマ変数、バリアント、コンポーネントの組み合わせでは適切に対応できない場合にのみ、カスタム CSS を追加します。
   • ユーザーからの依頼、またはタスク上の必要がない限り、v3 のプロジェクトを v4 に移行しません。
5. 意味のある最小範囲を検証します。
   • 関連するスタイルビルド、フレームワークビルド、型チェック、リンター、テスト、Storybook、またはブラウザーチェックを実行します。
   • UI の表示に関わる変更では、可能な場合、実際にレンダリングされた状態を確認します。
   • 実行できなかった検証があれば報告します。

Tailwind を判断する際の指針

• Tailwind v4 は CSS ファーストとして扱います。@import "tailwindcss";、CSS 内のテーマ変数、専用の Vite／PostCSS／CLI／webpack／Turbopack 統合パッケージを使用します。
• モノレポ、無視される外部パッケージ、複数のスタイルシート、セーフリスト、ソースの除外には @source を使用します。
• レスポンシブスタイルはモバイルファーストにします。プレフィックスなしのユーティリティはすべてのサイズに適用され、ブレークポイントのプレフィックスはそのブレークポイント以上に適用されます。
• ダークモードは明示的に扱います。デフォルトの prefers-color-scheme の動作を使うか、@custom-variant dark でプロジェクトのセレクターを定義します。
• Tailwind をインポートした場合、Preflight が有効になるものとして扱います。リセットされるマージン、スタイル指定のない見出しやリスト、ボーダーのリセット、ブロック表示の画像、レスポンシブメディア、非表示属性を考慮します。
• CSS パイプラインをフレームワークが管理している場合は、公式のフレームワークガイドを優先します。
• プロジェクトで Safari 16.4 未満、Chrome 111 未満、または Firefox 128 未満をサポートする必要がある場合、互換性について明示的な判断がない限り、Tailwind v4 を選択しません。