Tailwind Variants

Use this skill when work touches Tailwind Variants (tv, slots, compound variants, extend, cn/cx/cnMerge, /lite, or migrations across TV majors).

Workflow

1. Inspect the local styling stack before changing code:
   • Packages: tailwind-variants version, Tailwind CSS major (v4 vs v3), optional direct tailwind-merge usage, Prettier Tailwind plugin.
   • Import path: default tailwind-variants vs tailwind-variants/lite.
   • Patterns in use: single-element tv, slots, extend, shared createTV/defaultConfig, VariantProps on components.
2. Refresh docs when versions are unclear or work touches merge config, lite builds, or major upgrades. Start from source-map.md.
3. For install, default vs lite builds, cn/cnMerge/cx, and config, use setup-core.md.
4. For variants, boolean/compound variants, slots, and compoundSlots, use variants-slots.md.
5. For extend, overrides, TypeScript VariantProps, and DX tooling, use composition-typescript.md.
6. For conflict resolution, custom twMergeConfig, and v0/v1/v2/v3 migrations, use production-migration.md.

Implementation Judgment