feat: add Vite 7 support to the @tailwindcss/vite plugin

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
 

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"
           }
         }
       `,

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"
             }
           }
         `,

integrations/vite/html-style-blocks.test.ts

@@ -12,7 +12,7 @@ test(
           },
           "devDependencies": {
             "@tailwindcss/vite": "workspace:^",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,

integrations/vite/ignored-packages.test.ts

@@ -11,7 +11,7 @@ const WORKSPACE = {
         "tailwindcss": "workspace:^"
       },
       "devDependencies": {
-        "vite": "^6"
+        "vite": "^7"
       }
     }
   `,

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"
           }
         }
       `,

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"
           }
         }
       `,

integrations/vite/other-transforms.test.ts

@@ -14,7 +14,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
           },
           "devDependencies": {
             ${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,

integrations/vite/source-maps.test.ts

@@ -13,7 +13,7 @@ test(
           },
           "devDependencies": {
             "lightningcss": "^1",
-            "vite": "^6"
+            "vite": "^7"
           }
         }
       `,

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`,
+    ])
+  },
+)

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"
           }
         }
       `,

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"
             }
           }
         `,

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"
           }
         }
       `,

packages/@tailwindcss-vite/package.json

@@ -37,6 +37,6 @@
     "vite": "catalog:"
   },
   "peerDependencies": {
-    "vite": "^5.2.0 || ^6"
+    "vite": "^5.2.0 || ^6 || ^7"
   }
 }

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';

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);

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);