添加 tailwindcss

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

tonecn/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tonecn/src/assets/tailwind.css

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

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'

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: [],
+}
+