fix(deps): update dependency tailwindcss to v4 (#519)

renovate[bot] · sapphi-red · web-flow · commit 89a6ebc0a411 · 2025-04-26T23:50:51.000+09:00
Co-authored-by: renovate[bot] &lt;29139614+renovate[bot]@users.noreply.github.com&gt;
Co-authored-by: sapphi-red &lt;49056869+sapphi-red@users.noreply.github.com&gt;
diff --git a/playground/tailwind-v3/App.vue b/playground/tailwind-v3/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <PugTemplate />
+</template>
+
+<script setup lang="ts">
+import PugTemplate from './PugTemplate.vue'
+</script>
diff --git a/playground/tailwind-v3/PugTemplate.vue b/playground/tailwind-v3/PugTemplate.vue
@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>
diff --git a/playground/tailwind-v3/__tests__/tailwind.spec.ts b/playground/tailwind-v3/__tests__/tailwind.spec.ts
@@ -0,0 +1,27 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getBgColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
+  const el = await page.$('.pug')
+  expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('PugTemplate.vue', (code) =>
+        code.replace('bg-red-400', 'bg-red-600'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /PugTemplate.vue?vue&type=template&lang.js',
+    ],
+    false,
+  )
+  await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+})
diff --git a/playground/tailwind-v3/index.css b/playground/tailwind-v3/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/playground/tailwind-v3/index.html b/playground/tailwind-v3/index.html
@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="./index.css" />
+
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+</script>
diff --git a/playground/tailwind-v3/package.json b/playground/tailwind-v3/package.json
@@ -0,0 +1,23 @@
+{
+  "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.21",
+    "tailwindcss": "^3.4.17",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "@vitejs/plugin-vue": "workspace:*",
+    "ts-node": "^10.9.2"
+  }
+}
diff --git a/playground/tailwind-v3/postcss.config.cts b/playground/tailwind-v3/postcss.config.cts
diff --git a/playground/tailwind-v3/tailwind.config.js b/playground/tailwind-v3/tailwind.config.js
diff --git a/playground/tailwind-v3/vite.config.ts b/playground/tailwind-v3/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})
diff --git a/playground/tailwind/__tests__/tailwind.spec.ts b/playground/tailwind/__tests__/tailwind.spec.ts
@@ -10,7 +10,7 @@ import {
 
 test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
   const el = await page.$('.pug')
-  expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+  expect(await getBgColor(el)).toBe('oklch(0.704 0.191 22.216)')
 
   await untilBrowserLogAfter(
     () =>
@@ -23,5 +23,5 @@ test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
     ],
     false,
   )
-  await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+  await untilUpdated(() => getBgColor(el), 'oklch(0.577 0.245 27.325)')
 })
diff --git a/playground/tailwind/index.css b/playground/tailwind/index.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/playground/tailwind/package.json b/playground/tailwind/package.json
@@ -10,14 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.21",
-    "tailwindcss": "^3.4.17",
+    "@tailwindcss/vite": "^4.1.4",
+    "tailwindcss": "^4.1.4",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
   "devDependencies": {
     "@types/node": "^22.14.1",
-    "@vitejs/plugin-vue": "workspace:*",
-    "ts-node": "^10.9.2"
+    "@vitejs/plugin-vue": "workspace:*"
   }
 }
diff --git a/playground/tailwind/vite.config.ts b/playground/tailwind/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwind from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), tailwind()],
   build: {
     // to make tests faster
     minify: false,
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
@@ -53,7 +53,7 @@ function componentToHex(c: number): string {
   return hex.length === 1 ? '0' + hex : hex
 }
 
-function rgbToHex(rgb: string): string {
+function rgbToHex(rgb: string): string | undefined {
   const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
   if (match) {
     const [_, rs, gs, bs] = match
@@ -63,9 +63,8 @@ function rgbToHex(rgb: string): string {
       componentToHex(parseInt(gs, 10)) +
       componentToHex(parseInt(bs, 10))
     )
-  } else {
-    return '#000000'
   }
+  return undefined
 }
 
 const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
@@ -9,7 +9,7 @@
     "allowJs": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "noUnusedLocals": true,
     "jsx": "preserve",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template lang="pug">`
	`2`	`+.bg-red-400.pug Pug template`
	`3`	`+</template>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`