Default Variants
Set sensible default variant values on a recipe so call sites stay short, then override them only when needed.
Defaults apply when a variant key is omitted at the call site. Pass an explicit value to override any default.
Setting defaults
Use defaultVariants to pick the variant value applied when a key is omitted:
import { tv } from 'tailwind-variants';const button = tv({ base: 'inline-flex cursor-pointer items-center justify-center rounded-full font-medium select-none transition-colors', variants: { variant: { primary: 'bg-zinc-900 text-white', secondary: 'border border-zinc-300 bg-zinc-50 text-zinc-900', tertiary: 'text-zinc-700' }, size: { sm: 'h-8 px-3 text-sm', md: 'h-10 px-4 text-sm' } }, defaultVariants: { variant: 'primary', size: 'md' }});<button className={button()}>Primary, medium</button><button className={button({ size: 'sm' })}>Primary, small</button><button className={button({ variant: 'secondary' })}>Secondary, medium</button>Only size is overridden on the second button. variant stays primary. Explicit props win when you need a one-off.