feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384)

rozsazoltan · thecrypticace · web-flow · commit aa859314d9cd · 2025-06-24T12:31:17.000-04:00
Closes #18381 * [Changelog for Vite 7.0.0 (2025-06-24)](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#700-2025-06-24) Starting from Vite 7, Node 18 support will be dropped, which doesn't really affect Tailwind. It might be worth mentioning in the documentation that the recommended minimum Node versions are 20.19 and 22.12. Vite 7 is only available in ESM format, which is also not an issue. Vite's browser support aligns with the v4 guidelines: ``` Chrome 87 → 107 (tw: 111) Edge 88 → 107 (tw: 111) Firefox 78 → 104 (tw: 128) Safari 14.0 → 16.0 (tw: 16.4) ``` * [Vite 7 - Browser Support](https://vite.dev/guide/migration.html#default-browser-target-change) * [Tailwind CSS v4 - Browser Support](https://tailwindcss.com/docs/compatibility#browser-support) So, at first glance, there's nothing more to do except enabling support for these versions. --------- Co-authored-by: Jordan Pittman <jordan@cryptica.me>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add heuristic to skip candidate migrations inside `emit(…)` ([#18330](https://github.com/tailwindlabs/tailwindcss/pull/18330))
 - Extract candidates with variants in Clojure/ClojureScript keywords ([#18338](https://github.com/tailwindlabs/tailwindcss/pull/18338))
 - Document `--watch=always` in the CLI's usage ([#18337](https://github.com/tailwindlabs/tailwindcss/pull/18337))
+- Add support for Vite 7 to `@tailwindcss/vite` ([#18384](https://github.com/tailwindlabs/tailwindcss/pull/18384))
 
 ## [4.1.10] - 2025-06-11
 
diff --git a/integrations/vite/config.test.ts b/integrations/vite/config.test.ts
@@ -12,7 +12,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -76,7 +76,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -140,7 +140,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -219,7 +219,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/css-modules.test.ts b/integrations/vite/css-modules.test.ts
@@ -15,7 +15,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
diff --git a/integrations/vite/html-style-blocks.test.ts b/integrations/vite/html-style-blocks.test.ts
@@ -12,7 +12,7 @@ test(
           },
           "devDependencies": {
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/ignored-packages.test.ts b/integrations/vite/ignored-packages.test.ts
@@ -11,7 +11,7 @@ const WORKSPACE = {
         "tailwindcss": "workspace:^"
       },
       "devDependencies": {
-        "vite": "^6"
+        "vite": "^7"
       }
     }
   `,
diff --git a/integrations/vite/index.test.ts b/integrations/vite/index.test.ts
@@ -34,7 +34,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -111,7 +111,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -312,7 +312,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -491,7 +491,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -577,7 +577,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -679,7 +679,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             },
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
@@ -744,7 +744,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -816,7 +816,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -879,7 +879,7 @@ test(
             "@tailwindcss/vite": "workspace:^",
             "tailwindcss": "workspace:^",
             "plotly.js": "^3",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/multi-root.test.ts b/integrations/vite/multi-root.test.ts
@@ -12,7 +12,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -96,7 +96,7 @@ test(
             "tailwindcss": "workspace:^"
           },
           "devDependencies": {
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/other-transforms.test.ts b/integrations/vite/other-transforms.test.ts
@@ -14,7 +14,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
           },
           "devDependencies": {
             ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/source-maps.test.ts b/integrations/vite/source-maps.test.ts
@@ -13,7 +13,7 @@ test(
           },
           "devDependencies": {
             "lightningcss": "^1",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/ssr.test.ts b/integrations/vite/ssr.test.ts
@@ -119,3 +119,50 @@ test(
     ])
   },
 )
+
+test(
+  `Vite 7`,
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "@tailwindcss/vite": "workspace:^",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "vite": "^7"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import tailwindcss from '@tailwindcss/vite'
+        import { defineConfig } from 'vite'
+
+        export default defineConfig({
+          build: {
+            cssMinify: false,
+            ssrEmitAssets: true,
+          },
+          plugins: [tailwindcss()],
+        })
+      `,
+      ...WORKSPACE,
+    },
+  },
+  async ({ fs, exec, expect }) => {
+    await exec('pnpm vite build --ssr server.ts')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+    let [filename] = files[0]
+
+    await fs.expectFileToContain(filename, [
+      candidate`underline`,
+      candidate`m-2`,
+      candidate`overline`,
+      candidate`m-3`,
+    ])
+  },
+)
diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts
@@ -14,7 +14,7 @@ test(
           "devDependencies": {
             "@sveltejs/vite-plugin-svelte": "^5",
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -125,7 +125,7 @@ test(
           "devDependencies": {
             "@sveltejs/vite-plugin-svelte": "^5",
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/integrations/vite/url-rewriting.test.ts b/integrations/vite/url-rewriting.test.ts
@@ -17,7 +17,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
             "devDependencies": {
               ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
               "@tailwindcss/vite": "workspace:^",
-              "vite": "^6"
+              "vite": "^7"
             }
           }
         `,
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
@@ -15,7 +15,7 @@ test(
           "devDependencies": {
             "@vitejs/plugin-vue": "^5.1.2",
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
@@ -87,7 +87,7 @@ test(
           "devDependencies": {
             "@vitejs/plugin-vue": "^5.1.2",
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,
diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json
@@ -37,6 +37,6 @@
     "vite": "catalog:"
   },
   "peerDependencies": {
-    "vite": "^5.2.0 || ^6"
+    "vite": "^5.2.0 || ^6 || ^7"
   }
 }
diff --git a/packages/tailwindcss/src/at-import.test.ts b/packages/tailwindcss/src/at-import.test.ts
@@ -400,7 +400,7 @@ test('@layer', async () => {
 })
 
 test('supports theme(reference) imports', async () => {
-  expect(
+  await expect(
     run(
       css`
         @tailwind utilities;
@@ -542,7 +542,7 @@ test('it crashes when inside a cycle', async () => {
       base: '/root',
     })
 
-  expect(
+  await expect(
     run(
       css`
         @import 'foo.css';
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
@@ -23,7 +23,7 @@ describe('--alpha(…)', () => {
   })
 
   test('--alpha(…) errors when no arguments are used', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         .foo {
           margin: --alpha();
@@ -35,7 +35,7 @@ describe('--alpha(…)', () => {
   })
 
   test('--alpha(…) errors when alpha value is missing', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         .foo {
           margin: --alpha(red);
@@ -47,7 +47,7 @@ describe('--alpha(…)', () => {
   })
 
   test('--alpha(…) errors multiple arguments are used', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         .foo {
           margin: --alpha(red / 50%, blue);
@@ -101,7 +101,7 @@ describe('--spacing(…)', () => {
   })
 
   test('--spacing(…) relies on `--spacing` to be defined', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         .foo {
           margin: --spacing(4);
@@ -113,7 +113,7 @@ describe('--spacing(…)', () => {
   })
 
   test('--spacing(…) requires a single value', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         @theme {
           --spacing: 0.25rem;
@@ -129,7 +129,7 @@ describe('--spacing(…)', () => {
   })
 
   test('--spacing(…) does not have multiple arguments', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         .foo {
           margin: --spacing(4, 5, 6);
@@ -364,7 +364,7 @@ describe('--theme(…)', () => {
   })
 
   test('--theme(…) can only be used with CSS variables from your @theme', async () => {
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         @theme {
           --color-red-500: #f00;
@@ -377,7 +377,7 @@ describe('--theme(…)', () => {
       `[Error: The --theme(…) function can only be used with CSS variables from your theme.]`,
     )
 
-    expect(() =>
+    await expect(() =>
       compileCss(css`
         @theme {
           --color-red-500: #f00;
@@ -789,7 +789,7 @@ describe('theme(…)', () => {
       })
 
       test('theme(colors.unknown.500)', async () =>
-        expect(() =>
+        await expect(() =>
           compileCss(css`
             .red {
               color: theme(colors.unknown.500);
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
@@ -4363,7 +4363,7 @@ test('addBase', async () => {
 })
 
 it("should error when `layer(…)` is used, but it's not the first param", async () => {
-  expect(async () => {
+  await expect(async () => {
     return await compileCss(
       css`
         @import './bar.css' supports(display: grid) layer(utilities);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ test(`
`12`	`12`	`"tailwindcss": "workspace:^"`
`13`	`13`	`},`
`14`	`14`	`"devDependencies": {`
`15`		`- "vite": "^6"`
	`15`	`+ "vite": "^7"`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`	`,
`@@ -76,7 +76,7 @@ test(`
`76`	`76`	`"tailwindcss": "workspace:^"`
`77`	`77`	`},`
`78`	`78`	`"devDependencies": {`
`79`		`- "vite": "^6"`
	`79`	`+ "vite": "^7"`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`	`,
`@@ -140,7 +140,7 @@ test(`
`140`	`140`	`"tailwindcss": "workspace:^"`
`141`	`141`	`},`
`142`	`142`	`"devDependencies": {`
`143`		`- "vite": "^6"`
	`143`	`+ "vite": "^7"`
`144`	`144`	`}`
`145`	`145`	`}`
`146`	`146`	`,
`@@ -219,7 +219,7 @@ test(`
`219`	`219`	`"tailwindcss": "workspace:^"`
`220`	`220`	`},`
`221`	`221`	`"devDependencies": {`
`222`		`- "vite": "^6"`
	`222`	`+ "vite": "^7"`
`223`	`223`	`}`
`224`	`224`	`}`
`225`	`225`	`,
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`15`	`15`	`},`
`16`	`16`	`"devDependencies": {`
`17`	`17`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`18`		`- "vite": "^6"`
	`18`	`+ "vite": "^7"`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`,
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const WORKSPACE = {`
`11`	`11`	`"tailwindcss": "workspace:^"`
`12`	`12`	`},`
`13`	`13`	`"devDependencies": {`
`14`		`- "vite": "^6"`
	`14`	`+ "vite": "^7"`
`15`	`15`	`}`
`16`	`16`	`}`
`17`	`17`	`,
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`34`	`34`	`},`
`35`	`35`	`"devDependencies": {`
`36`	`36`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`37`		`- "vite": "^6"`
	`37`	`+ "vite": "^7"`
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`	`,
`@@ -111,7 +111,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`111`	`111`	`},`
`112`	`112`	`"devDependencies": {`
`113`	`113`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`114`		`- "vite": "^6"`
	`114`	`+ "vite": "^7"`
`115`	`115`	`}`
`116`	`116`	`}`
`117`	`117`	`,
`@@ -312,7 +312,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`312`	`312`	`},`
`313`	`313`	`"devDependencies": {`
`314`	`314`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`315`		`- "vite": "^6"`
	`315`	`+ "vite": "^7"`
`316`	`316`	`}`
`317`	`317`	`}`
`318`	`318`	`,
`@@ -491,7 +491,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`491`	`491`	`},`
`492`	`492`	`"devDependencies": {`
`493`	`493`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`494`		`- "vite": "^6"`
	`494`	`+ "vite": "^7"`
`495`	`495`	`}`
`496`	`496`	`}`
`497`	`497`	`,
`@@ -577,7 +577,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`577`	`577`	`},`
`578`	`578`	`"devDependencies": {`
`579`	`579`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`580`		`- "vite": "^6"`
	`580`	`+ "vite": "^7"`
`581`	`581`	`}`
`582`	`582`	`}`
`583`	`583`	`,
`@@ -679,7 +679,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {`
`679`	`679`	`},`
`680`	`680`	`"devDependencies": {`
`681`	`681`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`682`		`- "vite": "^6"`
	`682`	`+ "vite": "^7"`
`683`	`683`	`}`
`684`	`684`	`}`
`685`	`685`	`,
`@@ -744,7 +744,7 @@ test(`
`744`	`744`	`"tailwindcss": "workspace:^"`
`745`	`745`	`},`
`746`	`746`	`"devDependencies": {`
`747`		`- "vite": "^6"`
	`747`	`+ "vite": "^7"`
`748`	`748`	`}`
`749`	`749`	`}`
`750`	`750`	`,
`@@ -816,7 +816,7 @@ test(`
`816`	`816`	`"tailwindcss": "workspace:^"`
`817`	`817`	`},`
`818`	`818`	`"devDependencies": {`
`819`		`- "vite": "^6"`
	`819`	`+ "vite": "^7"`
`820`	`820`	`}`
`821`	`821`	`}`
`822`	`822`	`,
`@@ -879,7 +879,7 @@ test(`
`879`	`879`	`"@tailwindcss/vite": "workspace:^",`
`880`	`880`	`"tailwindcss": "workspace:^",`
`881`	`881`	`"plotly.js": "^3",`
`882`		`- "vite": "^6"`
	`882`	`+ "vite": "^7"`
`883`	`883`	`}`
`884`	`884`	`}`
`885`	`885`	`,
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ function createSetup(transformer: 'postcss' \| 'lightningcss') {`
`14`	`14`	`},`
`15`	`15`	`"devDependencies": {`
`16`	`16`	${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
`17`		`- "vite": "^6"`
	`17`	`+ "vite": "^7"`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`	`,
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ test(`
`13`	`13`	`},`
`14`	`14`	`"devDependencies": {`
`15`	`15`	`"lightningcss": "^1",`
`16`		`- "vite": "^6"`
	`16`	`+ "vite": "^7"`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`,