Merge branch 'main' into fix/issue-18344

eneroth · web-flow · commit 432fd74e1a5d · 2025-06-25T07:39:29.000+02:00
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/package.json b/package.json
@@ -51,7 +51,7 @@
     "@playwright/test": "^1.53.0",
     "@types/node": "catalog:",
     "postcss": "8.5.4",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "prettier": "catalog:",
     "prettier-plugin-embed": "^0.5.0",
     "prettier-plugin-organize-imports": "^4.0.0",
diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json
@@ -41,6 +41,6 @@
     "@types/postcss-import": "14.0.3",
     "dedent": "1.6.0",
     "internal-example-plugin": "workspace:*",
-    "postcss-import": "^16.1.0"
+    "postcss-import": "^16.1.1"
   }
 }
diff --git a/packages/@tailwindcss-upgrade/package.json b/packages/@tailwindcss-upgrade/package.json
@@ -37,7 +37,7 @@
     "mri": "^1.2.0",
     "picocolors": "^1.1.1",
     "postcss": "^8.4.41",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "postcss-selector-parser": "^7.1.0",
     "prettier": "catalog:",
     "semver": "^7.7.2",
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
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json
diff --git a/playgrounds/v3/package.json b/playgrounds/v3/package.json
diff --git a/playgrounds/vite/package.json b/playgrounds/vite/package.json
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`	`,