FAQ

Is Tailwind Variants free?Copy Anchor Link

Yes. MIT licensed. Use it in commercial and open-source projects.

Default build or lite?Copy Anchor Link

Default (tailwind-variants) when you want automatic Tailwind conflict resolution. Included since v3.3, no extra install.

Lite (tailwind-variants/lite) when you do not need the table, or you already have twMerge.

import { tv } from 'tailwind-variants';       // built-in merge
import { tv } from 'tailwind-variants/lite';  // no table

Inject a merger on lite with createTV / createCN. See Configuration.

Do I need tailwind-merge?Copy Anchor Link

No, not for the default build on v3.3+. Merge is included.

Keep tailwind-merge if your app imports it directly (twMerge, extendTailwindMerge, etc.). On /lite, inject that function with createTV / createCN.

Why slots: {}?Copy Anchor Link

An explicit empty slots object enables slot mode with a single implicit base slot:

const x = tv({ slots: {}, base: 'p-4' });
x().base(); // slot function

const y = tv({ base: 'p-4' });
y(); // plain string — omit slots entirely

Omit slots when you do not need slot functions.

cn vs cx vs cnMerge?Copy Anchor Link

cx('text-blue-500', 'text-red-500');  // both classes
cn('text-blue-500', 'text-red-500');  // "text-red-500"
cnMerge('px-2', 'px-4')({ twMerge: false }); // "px-2 px-4"

Use cn for everyday merge. Use cx when classes cannot conflict. On lite, use createCN to inject a merger. Use cnMerge for per-call config.

Framework support?Copy Anchor Link

Tailwind Variants is framework-agnostic. It returns class strings — use with any framework or vanilla JS. See Quick Start for binding examples.

Can I extend multiple components?Copy Anchor Link

Yes. Pass a non-empty array and parents merge left to right:

const button = tv({ extend: [baseButton, focusRing, pressable] });

On earlier versions, chain extends or compose class strings manually. See Extending.

Why did a class disappear from the output?Copy Anchor Link

Conflict resolution probably merged it away: the last conflicting utility wins (Class Resolution). To see exactly which classes were dropped, enable the experimental debug mode in development:

const button = tv({ /* ... */ }, { debug: true });

TypeScript not inferring variants?Copy Anchor Link

Define variants inline inside tv, or use as const on external objects:

const variants = { primary: 'bg-zinc-900 text-white', secondary: 'bg-zinc-100' } as const;
const button = tv({ variants: { variant: variants } });

Still stuck?Copy Anchor Link

Ask in Discord or open a GitHub Discussion.