fix(tailwind related): 修改配置文件内容

re #55

package.json

@@ -11,38 +11,50 @@
         "electron:serve": "vue-cli-service electron:serve",
         "eslint": "eslint . --fix",
         "postinstall": "electron-builder install-app-deps",
-        "postuninstall": "electron-builder install-app-deps"
+        "postuninstall": "electron-builder install-app-deps",
+        "build:tailwind": "tailwind build src/renderer/assets/index.css -o src/renderer/assets/tailwind.css"
     },
     "main": "background.js",
     "dependencies": {
-        "@tailwindcss/forms": "^0.5.3",
+        "@tailwindcss/forms": "0.2.1",
         "chai": "^4.3.7",
         "commitizen": "^4.3.0",
         "commitlint": "^17.5.1",
         "core-js": "^3.8.3",
         "cz-conventional-changelog": "^3.3.0",
+        "ficus-editor": "^1.0.0",
         "husky": "^8.0.3",
         "standard": "^17.0.0",
-        "tailwindcss": "2.x",
         "vue": "^3.2.13",
-        "ficus-editor": "^1.0.0"
+        "tailwindcss": "2.0.4"
     },
     "devDependencies": {
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
+        "@tailwindcss/postcss7-compat": "^2.2.17",
         "@typescript-eslint/eslint-plugin": "^5.57.1",
         "@typescript-eslint/parser": "^5.57.1",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
         "@vue/cli-service": "~5.0.0",
+        "autoprefixer": "9",
         "electron": "^13.0.0",
         "electron-devtools-installer": "^3.1.0",
         "eslint": "^8.38.0",
         "eslint-plugin-vue": "^8.0.3",
         "mocha": "^10.2.0",
+        "postcss": "8.x",
+        "unplugin-auto-import": "^0.11.4",
+        "unplugin-vue-components": "^0.22.9",
         "vue-cli-plugin-electron-builder": "~2.1.1",
+        "vue-template-compiler": "2.6.12",
         "wdio-chromedriver-service": "^8.1.1"
     },
+    "postcss": {
+        "plugins": {
+            "autoprefixer": {}
+        }
+    },
     "eslintConfig": {
         "root": true,
         "env": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
+}

src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import App from './renderer/App.vue'
-import './renderer/assets/index.css'
+import './renderer/assets/tailwind.css'
 
 createApp(App).mount('#app')

src/renderer/App.vue

@@ -20,7 +20,6 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
   margin-top: 60px;
 }
 </style>

src/renderer/assets/index.css

@@ -1,7 +1,7 @@
 /* ./src/index.css */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100;300;400;500;700;900&display=swap');
 
-@tailwind base;
-@tailwind components;
-/*@tailwind utilities;*/
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";

src/renderer/assets/tailwind.css

@@ -4671,4 +4671,4 @@ select {
 }
 
 @media (min-width: 1536px) {
-}
+}

src/renderer/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hello">
+  <div class="bg-SwissCoffee-500">
     <h1>{{ msg }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br>
@@ -31,6 +31,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'HelloWorld',
   props: {

tailwind.config.js

@@ -5,12 +5,10 @@ module.exports = {
   purge: {
     enabled: true,
     content: [
-      './src/*.html',
-      './*.html',
-      './src/*.js',
-      './*.js',
-      './src/*.vue',
-      './*.vue'
+      './public/*.html',
+      './src/renderer/*.js',
+      './src/renderer/*.vue',
+      './src/renderer/**/*.vue'
     ],
     options: {
       safelist: []