Skip to content

Commit aa85931

Browse files
rozsazoltanthecrypticace
rozsazoltan
and
thecrypticace
authored
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]>
1 parent b9007dd commit aa85931

19 files changed

+436
-409
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
- Add heuristic to skip candidate migrations inside `emit(…)` ([#18330](https://github.com/tailwindlabs/tailwindcss/pull/18330))
1111
- Extract candidates with variants in Clojure/ClojureScript keywords ([#18338](https://github.com/tailwindlabs/tailwindcss/pull/18338))
1212
- Document `--watch=always` in the CLI's usage ([#18337](https://github.com/tailwindlabs/tailwindcss/pull/18337))
13+
- Add support for Vite 7 to `@tailwindcss/vite` ([#18384](https://github.com/tailwindlabs/tailwindcss/pull/18384))
1314

1415
## [4.1.10] - 2025-06-11
1516

‎integrations/vite/config.test.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ test(
1212
"tailwindcss": "workspace:^"
1313
},
1414
"devDependencies": {
15-
"vite": "^6"
15+
"vite": "^7"
1616
}
1717
}
1818
`,
@@ -76,7 +76,7 @@ test(
7676
"tailwindcss": "workspace:^"
7777
},
7878
"devDependencies": {
79-
"vite": "^6"
79+
"vite": "^7"
8080
}
8181
}
8282
`,
@@ -140,7 +140,7 @@ test(
140140
"tailwindcss": "workspace:^"
141141
},
142142
"devDependencies": {
143-
"vite": "^6"
143+
"vite": "^7"
144144
}
145145
}
146146
`,
@@ -219,7 +219,7 @@ test(
219219
"tailwindcss": "workspace:^"
220220
},
221221
"devDependencies": {
222-
"vite": "^6"
222+
"vite": "^7"
223223
}
224224
}
225225
`,

‎integrations/vite/css-modules.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
1515
},
1616
"devDependencies": {
1717
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
18-
"vite": "^6"
18+
"vite": "^7"
1919
}
2020
}
2121
`,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ test(
1212
},
1313
"devDependencies": {
1414
"@tailwindcss/vite": "workspace:^",
15-
"vite": "^6"
15+
"vite": "^7"
1616
}
1717
}
1818
`,

‎integrations/vite/ignored-packages.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const WORKSPACE = {
1111
"tailwindcss": "workspace:^"
1212
},
1313
"devDependencies": {
14-
"vite": "^6"
14+
"vite": "^7"
1515
}
1616
}
1717
`,

‎integrations/vite/index.test.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
3434
},
3535
"devDependencies": {
3636
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
37-
"vite": "^6"
37+
"vite": "^7"
3838
}
3939
}
4040
`,
@@ -111,7 +111,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
111111
},
112112
"devDependencies": {
113113
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
114-
"vite": "^6"
114+
"vite": "^7"
115115
}
116116
}
117117
`,
@@ -312,7 +312,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
312312
},
313313
"devDependencies": {
314314
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
315-
"vite": "^6"
315+
"vite": "^7"
316316
}
317317
}
318318
`,
@@ -491,7 +491,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
491491
},
492492
"devDependencies": {
493493
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
494-
"vite": "^6"
494+
"vite": "^7"
495495
}
496496
}
497497
`,
@@ -577,7 +577,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
577577
},
578578
"devDependencies": {
579579
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
580-
"vite": "^6"
580+
"vite": "^7"
581581
}
582582
}
583583
`,
@@ -679,7 +679,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
679679
},
680680
"devDependencies": {
681681
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
682-
"vite": "^6"
682+
"vite": "^7"
683683
}
684684
}
685685
`,
@@ -744,7 +744,7 @@ test(
744744
"tailwindcss": "workspace:^"
745745
},
746746
"devDependencies": {
747-
"vite": "^6"
747+
"vite": "^7"
748748
}
749749
}
750750
`,
@@ -816,7 +816,7 @@ test(
816816
"tailwindcss": "workspace:^"
817817
},
818818
"devDependencies": {
819-
"vite": "^6"
819+
"vite": "^7"
820820
}
821821
}
822822
`,
@@ -879,7 +879,7 @@ test(
879879
"@tailwindcss/vite": "workspace:^",
880880
"tailwindcss": "workspace:^",
881881
"plotly.js": "^3",
882-
"vite": "^6"
882+
"vite": "^7"
883883
}
884884
}
885885
`,

‎integrations/vite/multi-root.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ test(
1212
"tailwindcss": "workspace:^"
1313
},
1414
"devDependencies": {
15-
"vite": "^6"
15+
"vite": "^7"
1616
}
1717
}
1818
`,
@@ -96,7 +96,7 @@ test(
9696
"tailwindcss": "workspace:^"
9797
},
9898
"devDependencies": {
99-
"vite": "^6"
99+
"vite": "^7"
100100
}
101101
}
102102
`,

‎integrations/vite/other-transforms.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function createSetup(transformer: 'postcss' | 'lightningcss') {
1414
},
1515
"devDependencies": {
1616
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
17-
"vite": "^6"
17+
"vite": "^7"
1818
}
1919
}
2020
`,

‎integrations/vite/source-maps.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ test(
1313
},
1414
"devDependencies": {
1515
"lightningcss": "^1",
16-
"vite": "^6"
16+
"vite": "^7"
1717
}
1818
}
1919
`,

‎integrations/vite/ssr.test.ts

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,3 +119,50 @@ test(
119119
])
120120
},
121121
)
122+
123+
test(
124+
`Vite 7`,
125+
{
126+
fs: {
127+
'package.json': json`
128+
{
129+
"type": "module",
130+
"dependencies": {
131+
"@tailwindcss/vite": "workspace:^",
132+
"tailwindcss": "workspace:^"
133+
},
134+
"devDependencies": {
135+
"vite": "^7"
136+
}
137+
}
138+
`,
139+
'vite.config.ts': ts`
140+
import tailwindcss from '@tailwindcss/vite'
141+
import { defineConfig } from 'vite'
142+
143+
export default defineConfig({
144+
build: {
145+
cssMinify: false,
146+
ssrEmitAssets: true,
147+
},
148+
plugins: [tailwindcss()],
149+
})
150+
`,
151+
...WORKSPACE,
152+
},
153+
},
154+
async ({ fs, exec, expect }) => {
155+
await exec('pnpm vite build --ssr server.ts')
156+
157+
let files = await fs.glob('dist/**/*.css')
158+
expect(files).toHaveLength(1)
159+
let [filename] = files[0]
160+
161+
await fs.expectFileToContain(filename, [
162+
candidate`underline`,
163+
candidate`m-2`,
164+
candidate`overline`,
165+
candidate`m-3`,
166+
])
167+
},
168+
)

‎integrations/vite/svelte.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ test(
1414
"devDependencies": {
1515
"@sveltejs/vite-plugin-svelte": "^5",
1616
"@tailwindcss/vite": "workspace:^",
17-
"vite": "^6"
17+
"vite": "^7"
1818
}
1919
}
2020
`,
@@ -125,7 +125,7 @@ test(
125125
"devDependencies": {
126126
"@sveltejs/vite-plugin-svelte": "^5",
127127
"@tailwindcss/vite": "workspace:^",
128-
"vite": "^6"
128+
"vite": "^7"
129129
}
130130
}
131131
`,

‎integrations/vite/url-rewriting.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe.each(['postcss', 'lightningcss'])('%s', (transformer) => {
1717
"devDependencies": {
1818
${transformer === 'lightningcss' ? `"lightningcss": "^1",` : ''}
1919
"@tailwindcss/vite": "workspace:^",
20-
"vite": "^6"
20+
"vite": "^7"
2121
}
2222
}
2323
`,

‎integrations/vite/vue.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test(
1515
"devDependencies": {
1616
"@vitejs/plugin-vue": "^5.1.2",
1717
"@tailwindcss/vite": "workspace:^",
18-
"vite": "^6"
18+
"vite": "^7"
1919
}
2020
}
2121
`,
@@ -87,7 +87,7 @@ test(
8787
"devDependencies": {
8888
"@vitejs/plugin-vue": "^5.1.2",
8989
"@tailwindcss/vite": "workspace:^",
90-
"vite": "^6"
90+
"vite": "^7"
9191
}
9292
}
9393
`,

‎packages/@tailwindcss-vite/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@
3737
"vite": "catalog:"
3838
},
3939
"peerDependencies": {
40-
"vite": "^5.2.0 || ^6"
40+
"vite": "^5.2.0 || ^6 || ^7"
4141
}
4242
}

‎packages/tailwindcss/src/at-import.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,7 @@ test('@layer', async () => {
400400
})
401401

402402
test('supports theme(reference) imports', async () => {
403-
expect(
403+
await expect(
404404
run(
405405
css`
406406
@tailwind utilities;
@@ -542,7 +542,7 @@ test('it crashes when inside a cycle', async () => {
542542
base: '/root',
543543
})
544544

545-
expect(
545+
await expect(
546546
run(
547547
css`
548548
@import 'foo.css';

‎packages/tailwindcss/src/css-functions.test.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('--alpha(…)', () => {
2323
})
2424

2525
test('--alpha(…) errors when no arguments are used', async () => {
26-
expect(() =>
26+
await expect(() =>
2727
compileCss(css`
2828
.foo {
2929
margin: --alpha();
@@ -35,7 +35,7 @@ describe('--alpha(…)', () => {
3535
})
3636

3737
test('--alpha(…) errors when alpha value is missing', async () => {
38-
expect(() =>
38+
await expect(() =>
3939
compileCss(css`
4040
.foo {
4141
margin: --alpha(red);
@@ -47,7 +47,7 @@ describe('--alpha(…)', () => {
4747
})
4848

4949
test('--alpha(…) errors multiple arguments are used', async () => {
50-
expect(() =>
50+
await expect(() =>
5151
compileCss(css`
5252
.foo {
5353
margin: --alpha(red / 50%, blue);
@@ -101,7 +101,7 @@ describe('--spacing(…)', () => {
101101
})
102102

103103
test('--spacing(…) relies on `--spacing` to be defined', async () => {
104-
expect(() =>
104+
await expect(() =>
105105
compileCss(css`
106106
.foo {
107107
margin: --spacing(4);
@@ -113,7 +113,7 @@ describe('--spacing(…)', () => {
113113
})
114114

115115
test('--spacing(…) requires a single value', async () => {
116-
expect(() =>
116+
await expect(() =>
117117
compileCss(css`
118118
@theme {
119119
--spacing: 0.25rem;
@@ -129,7 +129,7 @@ describe('--spacing(…)', () => {
129129
})
130130

131131
test('--spacing(…) does not have multiple arguments', async () => {
132-
expect(() =>
132+
await expect(() =>
133133
compileCss(css`
134134
.foo {
135135
margin: --spacing(4, 5, 6);
@@ -364,7 +364,7 @@ describe('--theme(…)', () => {
364364
})
365365

366366
test('--theme(…) can only be used with CSS variables from your @theme', async () => {
367-
expect(() =>
367+
await expect(() =>
368368
compileCss(css`
369369
@theme {
370370
--color-red-500: #f00;
@@ -377,7 +377,7 @@ describe('--theme(…)', () => {
377377
`[Error: The --theme(…) function can only be used with CSS variables from your theme.]`,
378378
)
379379

380-
expect(() =>
380+
await expect(() =>
381381
compileCss(css`
382382
@theme {
383383
--color-red-500: #f00;
@@ -789,7 +789,7 @@ describe('theme(…)', () => {
789789
})
790790

791791
test('theme(colors.unknown.500)', async () =>
792-
expect(() =>
792+
await expect(() =>
793793
compileCss(css`
794794
.red {
795795
color: theme(colors.unknown.500);

‎packages/tailwindcss/src/index.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4363,7 +4363,7 @@ test('addBase', async () => {
43634363
})
43644364

43654365
it("should error when `layer(…)` is used, but it's not the first param", async () => {
4366-
expect(async () => {
4366+
await expect(async () => {
43674367
return await compileCss(
43684368
css`
43694369
@import './bar.css' supports(display: grid) layer(utilities);

0 commit comments

Comments
 (0)