tailwind-variants

Tailwind Variants

Tailwind Variants（tv、スロット、複合バリアント、extend、cn／cx／cnMerge、/lite、またはTVのメジャーバージョン間の移行）に関わる作業では、このスキルを使用してください。

ワークフロー

1. コードを変更する前に、ローカルのスタイリング構成を確認します。
   • パッケージ：tailwind-variants のバージョン、Tailwind CSS のメジャーバージョン（v4 と v3）、tailwind-merge を直接使用しているかどうか、Prettier Tailwind プラグイン。
   • インポートパス：標準の tailwind-variants と tailwind-variants/lite のどちらか。
   • 使用中のパターン：単一要素の tv、スロット、extend、共有の createTV／defaultConfig、コンポーネントでの VariantProps。
2. バージョンが不明な場合、またはマージ設定、Lite ビルド、メジャーアップグレードに関わる作業では、ドキュメントを更新します。source-map.md から確認を始めてください。
3. インストール、標準ビルドとLiteビルドの違い、cn／cnMerge／cx、設定については、setup-core.md を参照してください。
4. variants、ブール型／複合バリアント、スロット、compoundSlots については、variants-slots.md を参照してください。
5. extend、オーバーライド、TypeScript の VariantProps、DXツールについては、composition-typescript.md を参照してください。
6. コンフリクト解決、カスタム twMergeConfig、v0／v1／v2／v3 の移行については、production-migration.md を参照してください。

実装上の判断

• TV v3.x と Tailwind CSS v4.x を組み合わせてください。 プロジェクトがまだ Tailwind CSS v3 を使用している場合は、tailwind-variants v0.x を使用するか、先にTailwindをアップグレードしてください。
• デザインシステムの開発には、標準ビルド（import { tv, cn } from 'tailwind-variants'）を優先してください。/lite は、バンドルサイズが重要で、マージが不要な場合にのみ使用してください。
• v3.3.0以降では、コンフリクト解決が標準ビルドに組み込まれています。TVのためだけに tailwind-merge を必須にしないでください。アプリが直接呼び出す場合に限り、tailwind-merge を残してください。スロットを使用する場合は、v3.3.1以降を固定してください（v3.3.0では、交互に実行された呼び出し間でスロットの状態が漏れていました）。
• 文字列を返すレシピには slots を指定しないでください。slots: {} を渡すとスロットモード（暗黙の base スロット）が有効になります。誤って空のスロットオブジェクトを指定しないようにしてください。
• tv の結果を base 配列に文字列連結するのではなく、型付きの合成には extend を優先してください。
• 利用側でのオーバーライドには class／className プロパティを使用し、マージが有効な場合はコンフリクト解決に任せてください。
• React／Vue のプロパティは VariantProps<typeof recipe> で型付けしてください。デフォルト値が適切でない場合は、Omit／Required を使ってバリアントを必須にしてください。
• 削除済みの responsiveVariants は使用しないでください。レスポンシブプレフィックス（md:、lg:）は、クラス文字列自体に指定してください。
• 非推奨の cnBase より cx を優先してください。結合後にマージする場合は cn を優先し、呼び出しごとにマージ設定を指定する場合にのみ cnMerge を使用してください。

検証

リポジトリで既存のチェックを優先してください。Tailwind Variants に重要な変更を加える場合は、関連する項目を実施してください。

• VariantProps、スロットの戻り値の形状、extend によるマージを対象とした型チェック。
• 重要なバリアント／複合バリアントの組み合わせについて、レシピが出力する文字列を検証するユニットテスト（特にマージの有効／無効を確認）。
• オーバーライドしたスロットや合成コンポーネントのビジュアル／ブラウザーでのスモークテスト。
• 標準ビルドと /lite を切り替える場合、または大規模な twMergeConfig を追加する場合のバンドルチェック。
• エディターで tv 内のクラス補完が動作しなくなった場合は、IntelliSense／tailwindFunctions: ['tv'] の動作を確認。