specsfy-specialist-tailwind-css

Tailwind CSS

フロー

1. バージョン、統合方法、トークンのソース、既存のコンポーネントを確認します。
2. レイアウトと状態をレスポンシブな制約に落とし込みます。
3. 任意の値より先に、セマンティックトークンを再利用します。
4. モバイルファーストで実装し、インタラクティブな状態とユーザー設定に対応します。
5. 見た目の繰り返しだけでなく、意味的なまとまりがある場合にコンポーネントを抽出します。
6. 競合、動的なクラス、生成された CSS を確認します。
7. ブラウザー、テーマ、ズーム、極端なサイズで検証します。

パターン

• 意図が伝わる名前のトークンで、色、スペーシング、角丸、タイポグラフィを管理します。
• 状態にはバリアントを使い、不透明な連結に動作を隠さないようにします。
• コンポーネントの代わりとして、@apply を汎用的に使うことは避けます。
• 動的に構築されるクラスがビルドで検出されるようにします。
• ダークモード、動きを減らす設定、コントラスト、強制カラーに適切に対応します。
• コンポーネントがコンテナーに依存する場合は、流動的なレイアウトとコンテナークエリを優先します。
• 新しいトークンを追加する理由がない限り、任意の値を増やさないようにします。

検証

• 本番ビルドと、スタイルの欠落の確認。
• ビューポート、コンテナー、ズーム 200/400％、テーマ、長いコンテンツ。
• ホバー、フォーカス可視、無効、読み込み中、エラー、選択済みの状態。
• コントラストと動きを減らす設定。

トークン、レスポンシブ対応、バリアント、アクセシビリティ、移行については、 references/standards.md をご覧ください。