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

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 <[email protected]>

Author: rozsazoltan

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