# Tailwind CSS v4 (https://www.tailwind-variants.org/docs/tailwind-v4)

Use Tailwind Variants with Tailwind CSS v4 — content scanning, conflict resolution, and what stays the same in recipes.

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:

```bash
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:

```css
@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](https://www.tailwind-variants.org/docs/responsive):

```ts
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