Tailwindcss v4 support

[Bricklou]

Describe the bug

Now that TailwindCSS v4 dropped, I tried to use the lib tailwind-variants with it. But some types seem to have broken on the way. Giving errors like this when building the project:

> tsc -b && vite build

../../../node_modules/.pnpm/[email protected][email protected]/node_modules/tailwind-variants/dist/transformer.d.ts:1:27 - error TS2307: Cannot find module 'tailwindcss/types/config' or its corresponding type declarations.

1 import type {Config} from "tailwindcss/types/config";
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~

../../../node_modules/.pnpm/[email protected][email protected]/node_modules/tailwind-variants/dist/transformer.d.ts:2:33 - error TS2307: Cannot find module 'tailwindcss/types/generated/default-theme' or its corresponding type declarations.

2 import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

To Reproduce
Steps to reproduce the behavior:

1. Setup an empty React project with vite
2. Install @tailwindcss/vite and tailwindcss with the default configuration
3. Install tailwind-variants
4. Create a basic component that use tv()
5. Run the build script
6. See error

Expected behavior
The project should build seemlesly.

Screenshots
If applicable, add screenshots to help explain your problem.

• NodeJS: 22.11.0
• TailwindCSS: 4
• tailwind-variants: 3.1.0

Additional context
Add any other context about the problem here.

[Bricklou]

I think I have a fix, but it will be a breaking change:

diff --git a/src/generator.d.ts b/src/generator.d.ts
index 5b34c70..fd048e2 100644
--- a/src/generator.d.ts
+++ b/src/generator.d.ts
@@ -1,4 +1,4 @@
-import {Config} from "tailwindcss/types/config";
+import {Config} from "tailwindcss";

 export type GenerateTypes = {
   (theme: Config["theme"]): void;
diff --git a/src/transformer.d.ts b/src/transformer.d.ts
index 508be4d..2953843 100644
--- a/src/transformer.d.ts
+++ b/src/transformer.d.ts
@@ -1,7 +1,7 @@
-import type {Config} from "tailwindcss/types/config";
-import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";
+import type {Config} from "tailwindcss";
+import type DefaultTheme from "tailwindcss/defaultTheme";

-export type DefaultScreens = keyof DefaultTheme["screens"];
+export type DefaultScreens = keyof (typeof DefaultTheme)["screens"];

 export type WithTV = {
   <C extends Config>(tvConfig: C, config?: TVTransformerConfig): C;

[leo-cheron]

Also, tailwind variants relies on tailwindcss/resolveConfig, which was removed from v4.

 Module not found: Can't resolve 'tailwindcss/resolveConfig'
1 | import { a } from './chunk-FUBUDMV2.js';
2 | import w from 'tailwindcss/resolveConfig';
  | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 |
4 | var p={tv:/tv\s*\(((\([^\)]*?\)|\[[^\]]*?\]|.)*?)\)/gs,tvExtend:/extend:\s*\w+(,| )\s*/,comment:/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,blankLine:/^\s*$(?:\r\n?|\n)/gm,extension:/\.\w+/g},l=n=>Array.isArray(n),E=n=>typeof n=="string",d=n=>typeof n=="object",T=n=>typeof n=="boolean",g=n=>typeof n=="function",f=n=>!!(!n||l(n)&&n.length===0||E(n)&&n.length===0||d(n)&&Object.keys(n).length===0),j=(n,r)=>{let t={},e=r.length,s=Object.prototype.hasOwnProperty;for(let a=0;a<e;a++){let o=r[a];s.call(n,o)&&(t[o]=n[o]);}return t},V=(n,r)=>{let t="https://github.com/heroui-inc/tailwind-variants/issues/new/choose";console.log("\x1B[31m%s\x1B[0m",`${n}: ${r.message}`),console.log(`If you think this is an issue, please submit it at ${t}`);},y=(...n)=>r=>n.reduce((t,e)=>e(t),r),S=n=>{let t=n.replace(p.comment,"$1").toString().replace(p.blankLine,"").toString(),e=s=>s[1].replace(p.tvExtend,"").toString();return Array.from(t.matchAll(p.tv),e)},$=n=>{let r=S(n);if(!f(r))return r.map(t=>t.includes("responsiveVariants")?new Function(`
5 |       const [options, config] = [${t.toString()}];

[ramcolinho]

hi guys I had updated tailwind 3 to 4 but tailwind variants has get error like this

[ ERROR ] TypeScript: node_modules/tailwind-variants/dist/transformer.d.ts:1:27
Cannot find module 'tailwindcss/types/config' or its corresponding type declarations.

  L1:  import type {Config} from "tailwindcss/types/config";
  L2:  import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";

[ ERROR ] TypeScript: node_modules/tailwind-variants/dist/transformer.d.ts:2:33
Cannot find module 'tailwindcss/types/generated/default-theme' or its corresponding type declarations.

  L1:  import type {Config} from "tailwindcss/types/config";
  L2:  import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";

[Bricklou]

hi guys I had updated tailwind 3 to 4 but tailwind variants has get error like this

[ ERROR ] TypeScript: node_modules/tailwind-variants/dist/transformer.d.ts:1:27 Cannot find module 'tailwindcss/types/config' or its corresponding type declarations.

  L1:  import type {Config} from "tailwindcss/types/config";
  L2:  import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";

[ ERROR ] TypeScript: node_modules/tailwind-variants/dist/transformer.d.ts:2:33 Cannot find module 'tailwindcss/types/generated/default-theme' or its corresponding type declarations.

  L1:  import type {Config} from "tailwindcss/types/config";
  L2:  import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";

I already reported the error and sent a potential fix above: #239 (comment)
But even with this fix, the tailwind-merge part is still missing for v4, so tailwind-variants will have to wait for this PR: dcastil/tailwind-merge#518.

[Bricklou]

tailwind-merge v3.0.0 has been released: dcastil/tailwind-merge#518 (comment)