test: upgrade tailwind playground to tailwind v4

Author: sapphi-red

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)')
 })

playground/tailwind/index.css

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

playground/tailwind/package.json

@@ -10,14 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "autoprefixer": "^10.4.21",
+    "@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:*"
   }
 }

playground/tailwind/postcss.config.cts

@@ -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,

playground/tailwind/tailwind.config.js

@@ -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))