tailwindcss

Tailwind CSS v4

コンポーネントのスタイリングには、ユーティリティを優先して使用してください。テーマトークン、ベースルール、ユーティリティでは明確に表現できないスタイルは、引き続き CSS で定義します。インストール済みの Tailwind バージョンと既存のデザインシステムを使用してください。

• テーマに応じた色、境界線、状態にはセマンティックトークンを使用してください。プロジェクトのトークンソースとデザインドキュメントに記載された名前を使い、shadcn の語彙がどこでも共通だと想定しないでください。
• クラス名は完全な形で記述し、静的に検出できるようにしてください。bg-${color}-500 のような補間フラグメントではなく、ルックアップマップを使用してください。
• 長いクラスは読みやすいようにグループ化してください。文字数の制限は設けません。バリアントを組み合わせる場合や、上書き可能な className の値を受け取る場合は、プロジェクトの cn／マージヘルパーを使用してください。
• スタイル設計とクラスのマージによって詳細度を解決し、!important は避けてください。@apply は、リポジトリで許可されている場合にのみ使用してください。
• コンテンツのニーズに合わせてレスポンシブレイアウトを構築し、キーボードフォーカスを見える状態に保ち、古い書き方を流用するのではなく、v4 でサポートされているユーティリティを選んでください。
• リポジトリを管理する既存のゲートで検証してください。既存のルート／パッケージコマンドを使用し、有効な検証結果があれば再利用してください。スタイリング専用の lint／型チェックを別途追加する必要はありません。

変更するユーティリティまたはバリアントについては、references/patterns.md を確認してください。そこにあるトークン名は例です。実際のテーマインベントリを使用してください。