UI-7

Author: imchatkit

README.md

@@ -3,3 +3,5 @@
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
 Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+
+#使用CNPM安装依赖

package.json

@@ -15,10 +15,14 @@
   },
   "devDependencies": {
     "@electron/remote": "^2.1.2",
+    "@tailwindcss/postcss": "^4.0.12",
     "@vitejs/plugin-vue": "^5.2.1",
+    "autoprefixer": "^10.4.21",
     "concurrently": "^9.1.2",
     "electron": "^35.0.1",
     "electron-builder": "^25.1.8",
+    "postcss": "^8.5.3",
+    "tailwindcss": "latest",
     "vite": "^6.2.0",
     "wait-on": "^8.0.2"
   }

postcss.config.cjs

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

tailwind.config.cjs

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        primary: '#007BFF',
+        secondary: '#6C757D',
+        text: '#343A40',
+        background: '#F8F9FA',
+        navigation: '#2654A1',
+        message_self: '#e2f5fd',
+        message_other: '#ffffff'
+      }
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}