fix(css): downgrade Tailwind CSS from v4 to v3.4 for better browser compatibility

Tailwind CSS v4 requires modern CSS features (@layer, @property, color-mix)
that are not supported in older WebView2 versions, causing styles to fail
on some Windows 11 systems.

Changes:
- Replace @tailwindcss/vite with postcss + autoprefixer
- Downgrade tailwindcss from 4.1.13 to 3.4.17
- Convert CSS imports from v4 syntax to v3 @tailwind directives
- Add darkMode: "selector" to tailwind.config.js
- Create postcss.config.js for PostCSS pipeline

This improves compatibility with older browsers and WebView2 runtimes
while maintaining the same visual appearance.

package.json

@@ -32,7 +32,10 @@
     "prettier": "^3.6.2",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
-    "vitest": "^2.0.5"
+    "vitest": "^2.0.5",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.4",
@@ -56,7 +59,6 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-visually-hidden": "^1.2.4",
-    "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-query": "^5.90.3",
     "@tauri-apps/api": "^2.8.0",
     "@tauri-apps/plugin-dialog": "^2.4.0",
@@ -76,7 +78,6 @@
     "smol-toml": "^1.4.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13",
     "zod": "^4.1.12"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/index.css

@@ -1,8 +1,7 @@
-/* 引入 Tailwind v4 内建样式与工具 */
+/* Tailwind CSS v3 指令 */
-@import "tailwindcss";
+@tailwind base;
-
+@tailwind components;
-/* 覆盖 Tailwind v4 默认的 dark 变体为"类选择器"模式 */
+@tailwind utilities;
-@custom-variant dark (&:where(.dark, .dark *));
 
 /* shadcn/ui 主题变量 - 蓝色主题 */
 @layer base {

tailwind.config.js

@@ -4,6 +4,7 @@ export default {
     "./src/index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: "selector",
   theme: {
     extend: {
       colors: {

vite.config.mts

@@ -1,11 +1,10 @@
 import path from "node:path";
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   root: "src",
-  plugins: [react(), tailwindcss()],
+  plugins: [react()],
   base: "./",
   build: {
     outDir: "../dist",