diff --git a/tonecn/package.json b/tonecn/package.json
index efc18c4..6f19346 100644
--- a/tonecn/package.json
+++ b/tonecn/package.json
@@ -26,9 +26,12 @@
     "@types/node": "^20.12.5",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.20",
     "element-plus": "^2.7.3",
     "npm": "^10.8.3",
     "npm-run-all2": "^6.1.2",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
     "typescript": "~5.4.0",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-vue-components": "^0.27.0",
diff --git a/tonecn/postcss.config.js b/tonecn/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/tonecn/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/tonecn/src/assets/tailwind.css b/tonecn/src/assets/tailwind.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/tonecn/src/assets/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tonecn/src/main.ts b/tonecn/src/main.ts
index 4414b20..4ec3c14 100644
--- a/tonecn/src/main.ts
+++ b/tonecn/src/main.ts
@@ -1,4 +1,5 @@
 import './assets/main.css'
+import './assets/tailwind.css'
 
 import { createApp } from 'vue'
 import 'element-plus/dist/index.css'
diff --git a/tonecn/tailwind.config.js b/tonecn/tailwind.config.js
new file mode 100644
index 0000000..6c6c936
--- /dev/null
+++ b/tonecn/tailwind.config.js
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'default-bg': '#fafafa',
+        'dark-bg': '#1a1a1a',
+      }
+    },
+  },
+  plugins: [],
+}
+