Upgrade Tailwind and add css optimization (#21)

change/@zhishuyun-hub-c12600c7-f743-42de-aa4d-e02ae31311e4.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "upgrade tailwind and add css optimization",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "start": "vite --host",
-    "build": "vite build --mode=development",
+    "build": "cross-env NODE_ENV=production vite build --mode=development",
     "serve": "vite preview",
     "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
     "prettier": "prettier --write .",
@@ -66,9 +66,10 @@
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-vue": "^2.3.0",
     "@vue/compiler-sfc": "^3.0.5",
-    "autoprefixer": "^10.3.3",
+    "autoprefixer": "^10.4.16",
     "beachball": "^2.39.0",
     "cross-env": "^7.0.3",
+    "cssnano": "^6.0.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^16.0.3",
@@ -79,12 +80,13 @@
     "eslint-plugin-promise": "^5.0.0",
     "eslint-plugin-vue": "^8.5.0",
     "husky": "^7.0.2",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.32",
     "prettier": "^2.6.2",
     "rollup-plugin-string": "^3.0.0",
     "sass": "^1.38.1",
-    "tailwindcss": "^2.2.8",
+    "tailwindcss": "^3.4.0",
     "typescript": "^4.9.5",
+    "unplugin-element-plus": "^0.8.0",
     "vite": "^2.9.16",
     "vue-tsc": "^1.2.0"
   },

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
   }
 };

src/assets/css/tailwind.css

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

src/pages/console/distribution/History.vue

@@ -175,6 +175,8 @@ export default defineComponent({
   padding: 30px;
   width: calc(100% - 300px);
   background-color: #f3f5f6;
+  height: 100%;
+  overflow-y: scroll;
 
   .api-key {
     .copy {

src/pages/console/distribution/Index.vue

@@ -409,6 +409,8 @@ export default defineComponent({
   padding: 30px;
   width: calc(100% - 300px);
   background-color: #f3f5f6;
+  height: 100%;
+  overflow-y: scroll;
 
   .message {
     font-size: 14px;

src/pages/console/distribution/Invitees.vue

@@ -159,6 +159,8 @@ export default defineComponent({
   padding: 30px;
   width: calc(100% - 300px);
   background-color: #f3f5f6;
+  height: 100%;
+  overflow-y: scroll;
 }
 
 .pagination {

tailwind.config.js

@@ -1,14 +1,7 @@
 module.exports = {
-  purge: {
-    enabled: process.env.NODE_ENV !== 'development',
-    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
-  },
-  darkMode: false,
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {}
   },
-  variants: {
-    extend: {}
-  },
   plugins: []
 };