test: add tailwind v3 playground

Author: sapphi-red

playground/tailwind-v3/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <PugTemplate />
+</template>
+
+<script setup lang="ts">
+import PugTemplate from './PugTemplate.vue'
+</script>

playground/tailwind-v3/PugTemplate.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>

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

playground/tailwind-v3/index.css

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

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>

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"
+  }
+}

playground/tailwind-v3/postcss.config.cts

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' },
+    autoprefixer: {},
+  },
+}

playground/tailwind-v3/tailwind.config.js

@@ -0,0 +1,17 @@
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'node:path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [__dirname + '/**/*.vue'],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

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,
+  },
+})