build(vscode-ide-companion): add Tailwind CSS configuration

添加 Tailwind CSS、PostCSS 和 Autoprefixer 配置，为渐进式采用 Tailwind CSS 做准备

packages/vscode-ide-companion/package.json

@@ -175,10 +175,13 @@
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.1",
     "@vscode/vsce": "^3.6.0",
+    "autoprefixer": "^10.4.22",
     "esbuild": "^0.25.3",
     "eslint": "^9.25.1",
     "npm-run-all2": "^8.0.2",
+    "postcss": "^8.5.6",
     "sass": "^1.94.1",
+    "tailwindcss": "^3.4.18",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4"
   },

packages/vscode-ide-companion/postcss.config.js

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

packages/vscode-ide-companion/tailwind.config.js

@@ -0,0 +1,36 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    // 渐进式采用策略：只扫描新创建的Tailwind组件
+    "./src/webview/components/ui/**/*.{js,jsx,ts,tsx}",
+    "./src/webview/components/TailwindDemo.tsx",
+    // 当需要在更多组件中使用Tailwind时，可以逐步添加路径
+    // "./src/webview/components/NewComponent/**/*.{js,jsx,ts,tsx}",
+    // "./src/webview/pages/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'qwen': {
+          'orange': '#615fff',
+          'clay-orange': '#4f46e5',
+          'ivory': '#f5f5ff',
+          'slate': '#141420',
+          'green': '#6bcf7f',
+        }
+      },
+      borderRadius: {
+        'small': '4px',
+        'medium': '6px',
+        'large': '8px',
+      },
+      spacing: {
+        'small': '4px',
+        'medium': '8px',
+        'large': '12px',
+        'xlarge': '16px',
+      }
+    },
+  },
+  plugins: [],
+}