Tailwind CSS v4

Tailwind Variants works with Tailwind CSS v4. Class strings are plain Tailwind utilities — TV does not depend on a specific Tailwind major version.

No TV-specific migration

Upgrade Tailwind and TV independently:

npm install tailwindcss@latest tailwind-variants@latest

Your recipes, variants, and slots stay the same. Conflict resolution in the default build handles v4 utility names.

Content sources

Tailwind v4 scans sources via @source in CSS instead of content in a JS config. Make sure files that call tv() are included so Tailwind generates the classes your variants reference:

@import "tailwindcss";

@source "../components/**/*.{js,ts,jsx,tsx}";
@source "../node_modules/your-ui-lib/dist/**/*.{js,ts,jsx,tsx}";

If a class only appears inside a TV recipe string, the file defining that recipe must be in a scanned path.

Responsive variants

Tailwind v4 removed config.content.transform, so TV's old responsiveVariants option is gone. Use Tailwind responsive prefixes directly in your classes — see Responsive:

const text = tv({
  base: 'text-sm md:text-base lg:text-lg',
  variants: {
    emphasis: {
      high: 'font-bold md:font-extrabold'
    }
  }
});

Removed APIs

These were removed in earlier major versions and do not apply to v3:

• responsiveVariants — use responsive prefixes in class strings
• withTv — use tv directly