mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
aa859314d9
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>
288 lines
6.8 KiB
TypeScript
288 lines
6.8 KiB
TypeScript
import { candidate, css, fetchStyles, html, js, json, retryAssertion, test, ts } from '../utils'
|
|
|
|
test(
|
|
'Config files (CJS)',
|
|
{
|
|
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 },
|
|
plugins: [tailwindcss()],
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="text-primary"></div>
|
|
</body>
|
|
`,
|
|
'tailwind.config.cjs': js`
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: 'blue',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@config '../tailwind.config.cjs';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec, expect }) => {
|
|
await exec('pnpm vite build')
|
|
|
|
let files = await fs.glob('dist/**/*.css')
|
|
expect(files).toHaveLength(1)
|
|
let [filename] = files[0]
|
|
|
|
await fs.expectFileToContain(filename, [
|
|
//
|
|
candidate`text-primary`,
|
|
])
|
|
},
|
|
)
|
|
|
|
test(
|
|
'Config files (ESM)',
|
|
{
|
|
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 },
|
|
plugins: [tailwindcss()],
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="text-primary"></div>
|
|
</body>
|
|
`,
|
|
'tailwind.config.js': js`
|
|
export default {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: 'blue',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@config '../tailwind.config.js';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec, expect }) => {
|
|
await exec('pnpm vite build')
|
|
|
|
let files = await fs.glob('dist/**/*.css')
|
|
expect(files).toHaveLength(1)
|
|
let [filename] = files[0]
|
|
|
|
await fs.expectFileToContain(filename, [
|
|
//
|
|
candidate`text-primary`,
|
|
])
|
|
},
|
|
)
|
|
|
|
test(
|
|
'Config files (CJS, dev mode)',
|
|
{
|
|
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 },
|
|
plugins: [tailwindcss()],
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="text-primary"></div>
|
|
</body>
|
|
`,
|
|
'tailwind.config.cjs': js`
|
|
const myColor = require('./my-color.cjs')
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: myColor,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
'my-color.cjs': js`module.exports = 'blue'`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@config '../tailwind.config.cjs';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, spawn, expect }) => {
|
|
let process = await spawn('pnpm vite dev')
|
|
await process.onStdout((m) => m.includes('ready in'))
|
|
|
|
let url = ''
|
|
await process.onStdout((m) => {
|
|
let match = /Local:\s*(http.*)\//.exec(m)
|
|
if (match) url = match[1]
|
|
return Boolean(url)
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(url, '/index.html')
|
|
expect(css).toContain(candidate`text-primary`)
|
|
expect(css).toContain('color: blue')
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
await fs.write('my-color.cjs', js`module.exports = 'red'`)
|
|
|
|
let css = await fetchStyles(url, '/index.html')
|
|
expect(css).toContain(candidate`text-primary`)
|
|
expect(css).toContain('color: red')
|
|
})
|
|
},
|
|
)
|
|
|
|
test(
|
|
'Config files (ESM, dev mode)',
|
|
{
|
|
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 },
|
|
plugins: [tailwindcss()],
|
|
})
|
|
`,
|
|
'index.html': html`
|
|
<head>
|
|
<link rel="stylesheet" href="./src/index.css" />
|
|
</head>
|
|
<body>
|
|
<div class="text-primary"></div>
|
|
</body>
|
|
`,
|
|
'tailwind.config.mjs': js`
|
|
import myColor from './my-color.mjs'
|
|
export default {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: myColor,
|
|
},
|
|
},
|
|
},
|
|
}
|
|
`,
|
|
'my-color.mjs': js`export default 'blue'`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss';
|
|
@config '../tailwind.config.mjs';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, spawn, expect }) => {
|
|
let process = await spawn('pnpm vite dev')
|
|
await process.onStdout((m) => m.includes('ready in'))
|
|
|
|
let url = ''
|
|
await process.onStdout((m) => {
|
|
let match = /Local:\s*(http.*)\//.exec(m)
|
|
if (match) url = match[1]
|
|
return Boolean(url)
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(url, '/index.html')
|
|
expect(css).toContain(candidate`text-primary`)
|
|
expect(css).toContain('color: blue')
|
|
})
|
|
|
|
await retryAssertion(async () => {
|
|
await fs.write('my-color.mjs', js`export default 'red'`)
|
|
|
|
let css = await fetchStyles(url, '/index.html')
|
|
expect(css).toContain(candidate`text-primary`)
|
|
expect(css).toContain('color: red')
|
|
})
|
|
},
|
|
)
|