test: upgrade to tailwind v4

playground/backend-integration/frontend/styles/tailwind.css

@@ -1 +1 @@
-@tailwind utilities;
+@import 'tailwindcss';

playground/backend-integration/package.json

@@ -10,8 +10,9 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.3",
     "sass": "^1.83.4",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.3",
     "tinyglobby": "^0.2.10"
   }
 }

playground/backend-integration/vite.config.js

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import { globSync } from 'tinyglobby'
 import { defineConfig, normalizePath } from 'vite'
+import tailwind from '@tailwindcss/vite'
 
 /**
  * @returns {import('vite').Plugin}
@@ -53,5 +54,5 @@ function BackendIntegrationExample() {
 
 export default defineConfig({
   base: '/dev/',
-  plugins: [BackendIntegrationExample()],
+  plugins: [BackendIntegrationExample(), tailwind()],
 })

playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts

@@ -22,7 +22,7 @@ test.runIf(isServe)('postcss plugins in different dir', async () => {
   try {
     await page.goto(`http://localhost:${port}`)
     const tailwindStyle = page.locator('#tailwind-style')
-    expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
+    expect(await getBgColor(tailwindStyle)).toBe('oklch(0.936 0.032 17.717)')
     expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
   } finally {
     await server.close()

playground/tailwind-sourcemap/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "tailwindcss": "^3.4.17"
+    "@tailwindcss/postcss": "^4.0.3",
+    "tailwindcss": "^4.0.3"
   }
 }

playground/tailwind-sourcemap/postcss.config.js

@@ -1,11 +1,6 @@
-import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
 export default {
   plugins: {
-    tailwindcss: { config: __dirname + '/tailwind.config.js' },
+    // using postcss tailwind as we want to test postcss integration
+    '@tailwindcss/postcss': {},
   },
 }

playground/tailwind-sourcemap/tailwind.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';

playground/tailwind-v3/__test__/tailwind-v3.spec.ts

@@ -0,0 +1,81 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test('should render', async () => {
+  expect(await page.textContent('#pagetitle')).toBe('Page title')
+})
+
+test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
+  const el = page.locator('#view1-text')
+  expect(await getColor(el)).toBe('rgb(22, 163, 74)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/views/view1.js', (code) =>
+        code.replace('|view1|', '|view1 updated|'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/views/view1.js via /src/main.js',
+    ],
+    false,
+  )
+  await untilUpdated(() => el.textContent(), '|view1 updated|')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/views/view1.js', (code) =>
+        code.replace('text-green-600', 'text-orange-600'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/views/view1.js via /src/main.js',
+    ],
+    false,
+  )
+  await untilUpdated(async () => getColor(el), 'rgb(234, 88, 12)')
+})
+
+test.runIf(isServe)(
+  'same file duplicated in module graph (#4267)',
+  async () => {
+    const el = page.locator('#component1')
+    expect(await getColor(el)).toBe('rgb(220, 38, 38)')
+
+    // when duplicated, page reload happens
+    await untilBrowserLogAfter(
+      () =>
+        editFile('src/components/component1.js', (code) =>
+          code.replace('text-red-600', 'text-blue-600'),
+        ),
+      [
+        '[vite] css hot updated: /index.css',
+        '[vite] hot updated: /src/components/component1.js',
+      ],
+      false,
+    )
+    await untilUpdated(() => getColor(el), 'rgb(37, 99, 235)')
+  },
+)
+
+test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
+  const el = page.locator('#pagetitle')
+  expect(await getColor(el)).toBe('rgb(124, 58, 237)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/main.js', (code) =>
+        code.replace('text-violet-600', 'text-cyan-600'),
+      ),
+    ['[vite] css hot updated: /index.css', '[vite] hot updated: /src/main.js'],
+    false,
+  )
+  await untilUpdated(() => getColor(el), 'rgb(8, 145, 178)')
+})

playground/tailwind-v3/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

playground/tailwind-v3/index.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="./index.css" />
+
+<div id="app"></div>
+
+<script type="module" src="/src/main.js" defer></script>

playground/tailwind-v3/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vitejs/test-tailwind-v3",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^3.4.17",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "tsx": "^4.19.2"
+  }
+}

playground/tailwind-v3/src/components/component1.js

@@ -0,0 +1,9 @@
+export const component1 = /* html */ `
+  <div id="component1" data-id="component1" class="text-red-600">component1</div>
+`
+
+import.meta.hot?.accept((mod) => {
+  document.querySelectorAll('[data-id="component1"]').forEach((d) => {
+    d.outerHTML = mod.component1
+  })
+})

playground/tailwind-v3/src/main.js

@@ -0,0 +1,18 @@
+import { view1 } from './views/view1'
+
+export const main = (view1Content) => /* html */ `
+  <h1 id="pagetitle" class="text-3xl text-violet-600">Page title</h1>
+  ${view1Content}
+  <!-- used in postcss-plugins-different-dir -->
+  <div id="tailwind-style" class="bg-red-100 text-[#888888]">style</div>
+`
+
+document.getElementById('app').innerHTML = main(view1)
+
+import.meta.hot?.accept((mod) => {
+  document.getElementById('app').innerHTML = mod.main(view1)
+})
+
+import.meta.hot?.accept(['./views/view1'], ([mod]) => {
+  document.getElementById('app').innerHTML = main(mod.view1)
+})

playground/tailwind-v3/src/views/view1.js

@@ -0,0 +1,8 @@
+import { component1 } from '../components/component1'
+
+export const view1 = /* html */ `
+  <div data-id="view1">
+    <div id="view1-text" class="text-green-600">|view1|</div>
+    ${component1}
+  </div>
+`

playground/tailwind-v3/tailwind.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    // Before editing this section, make sure no paths are matching with `/src/main.js`
+    // Look https://github.com/vitejs/vite/pull/6959 for more details
+    __dirname + '/src/{components,views}/**/*.js',
+    __dirname + '/src/main.js',
+  ],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config

playground/tailwind-v3/vite.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite'
+import type { Plugin } from 'vite'
+
+function delayIndexCssPlugin(): Plugin {
+  let server
+  return {
+    name: 'delay-index-css',
+    enforce: 'pre',
+    configureServer(_server) {
+      server = _server
+    },
+    async load(id) {
+      if (server && id.includes('index.css')) {
+        await server.waitForRequestsIdle(id)
+      }
+    },
+  }
+}
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '/@': __dirname,
+    },
+  },
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+  plugins: [
+    {
+      name: 'delay view',
+      enforce: 'pre',
+      async transform(_code, id) {
+        if (id.includes('views/view1.js')) {
+          await new Promise((resolve) => setTimeout(resolve, 100))
+        }
+      },
+    },
+    delayIndexCssPlugin(),
+  ],
+})

playground/tailwind/__test__/tailwind.spec.ts

@@ -14,7 +14,7 @@ test('should render', async () => {
 
 test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
   const el = page.locator('#view1-text')
-  expect(await getColor(el)).toBe('rgb(22, 163, 74)')
+  expect(await getColor(el)).toBe('oklch(0.627 0.194 149.214)')
 
   await untilBrowserLogAfter(
     () =>
@@ -40,15 +40,14 @@ test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
     ],
     false,
   )
-  // await new Promise(resolve => setTimeout(resolve, 10))
-  await untilUpdated(async () => getColor(el), 'rgb(234, 88, 12)')
+  await untilUpdated(async () => getColor(el), 'oklch(0.646 0.222 41.116)')
 })
 
 test.runIf(isServe)(
   'same file duplicated in module graph (#4267)',
   async () => {
     const el = page.locator('#component1')
-    expect(await getColor(el)).toBe('rgb(220, 38, 38)')
+    expect(await getColor(el)).toBe('oklch(0.577 0.245 27.325)')
 
     // when duplicated, page reload happens
     await untilBrowserLogAfter(
@@ -62,13 +61,13 @@ test.runIf(isServe)(
       ],
       false,
     )
-    await untilUpdated(() => getColor(el), 'rgb(37, 99, 235)')
+    await untilUpdated(() => getColor(el), 'oklch(0.546 0.245 262.881)')
   },
 )
 
 test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
   const el = page.locator('#pagetitle')
-  expect(await getColor(el)).toBe('rgb(124, 58, 237)')
+  expect(await getColor(el)).toBe('oklch(0.541 0.281 293.009)')
 
   await untilBrowserLogAfter(
     () =>
@@ -78,5 +77,5 @@ test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
     ['[vite] css hot updated: /index.css', '[vite] hot updated: /src/main.js'],
     false,
   )
-  await untilUpdated(() => getColor(el), 'rgb(8, 145, 178)')
+  await untilUpdated(() => getColor(el), 'oklch(0.609 0.126 221.723)')
 })

playground/tailwind/index.css

@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config './tailwind.config.ts';

playground/tailwind/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.20",
-    "tailwindcss": "^3.4.17",
+    "@tailwindcss/vite": "^4.0.3",
+    "tailwindcss": "^4.0.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

playground/tailwind/tailwind.config.ts

@@ -10,8 +10,5 @@ export default {
   theme: {
     extend: {},
   },
-  variants: {
-    extend: {},
-  },
   plugins: [],
 } satisfies Config