Responsive Variants in Tailwind CSS v4

[guidominguesnk]

Since upgrading to Tailwind CSS v4.0.0.alpha.25, I am encountering issues with the withTV function from tailwind-variants. When I include withTV in my tailwind.config.js, the entire application breaks. However, if I remove it, the application works fine, but I lose the ability to use Responsive Variants.

My project is structured using Turborepo v2.1.2 and Next.js v14.2.13, with the following folder structure:

• apps/web for the main application
• packages/ui for shared components

To Reproduce

1. Install Tailwind CSS v4
2. Create a global CSS file
3. Add tailwind.config.js
4. Add withTV function to the tailwind.config.js file
5. Import the configuration in CSS
6. Run the application

Expected behavior
I expected the withTV function to work as it did in previous versions of Tailwind, enabling Responsive Variants without breaking the app.

Desktop

• OS: macOS
• Browser Arc
• Version 1.61.2

Additional context

In Tailwind v4, the configuration file is no longer necessary as everything can be handled through native CSS. However, while migrating, I was still using the tailwind.config.js file and importing it into my CSS like this:

@import "tailwindcss";
@config "../../tailwind.config.js";

It seems that the withTV function is not compatible with the new Tailwind v4 setup. Removing withTV resolves the issue but breaks Responsive Variants.

[gperdomor]

@guidominguesnk only responsive variants are not working? the rest of things works well?

[PatrykWalach]

It seems that transformers are not supported in v4, as a workaround I use tvTransformer as a simple vite plugin

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

import { defineConfig, type PluginOption } from "vite"
import { tvTransformer } from "tailwind-variants/transformer"
import tailwindConfig from './tailwind.config'

function tvTransform(): PluginOption {
  return {
    name: "tv-transformer", transform(src, id) {
      if (/\.[jt]sx?$/.test(id)) {
        return {
          enforce: "pre",
          code: tvTransformer(src, Object.keys(tailwindConfig.theme.screens)),
          map: null
        }
      }
    }
  }
}


export default defineConfig({
  plugins: [tvTransform(), tailwindcss()]
})