refactor: refactor tailwindcss to windicss

Author: anncwb

.vscode/settings.json

@@ -147,6 +147,8 @@
     "vueuse",
     "zxcvbn",
     "lintstagedrc",
-    "brotli"
+    "brotli",
+    "tailwindcss",
+    "sider"
   ]
 }

CHANGELOG.zh_CN.md

@@ -1,3 +1,12 @@
+## 2.7.0(2021-08-03)
+
+## (破坏性更新) Breaking changes
+
+- 将项目`tailwindcss`还原回`windicss`，尝试了`tailwindcss`，问题可能还挺多，先切换回`windicss`提高开发效率，切换成本较低。
+  - 目前项目不兼容地方有
+    - `xl:!m-4` 之类的写法需要改为`!xl:m-4`,注意只有`!`这个不兼容，没用到则不用改
+    - 内存溢出问题可能还在（频率低，重启下即可，重启 vite 较快）
+
 ### ✨ Features
 
 - **Preview** 添加新的属性及事件

build/vite/plugin/index.ts

@@ -5,7 +5,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 
 import purgeIcons from 'vite-plugin-purge-icons';
-
+import windiCSS from 'vite-plugin-windicss';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
@@ -33,6 +33,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vueJsx(),
   ];
 
+  // vite-plugin-windicss
+  vitePlugins.push(windiCSS());
+
   // TODO
   !isBuild && vitePlugins.push(configHmrPlugin());
 

package.json

@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.3",
-    "@logicflow/core": "^0.6.5",
-    "@logicflow/extension": "^0.6.5",
+    "@logicflow/core": "^0.6.6",
+    "@logicflow/extension": "^0.6.6",
     "@vueuse/core": "^5.2.0",
     "@zxcvbn-ts/core": "^1.0.0-beta.0",
     "ant-design-vue": "2.2.2",
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
-    "@iconify/json": "^1.1.381",
+    "@iconify/json": "^1.1.382",
     "@purge-icons/generated": "^0.7.0",
     "@types/codemirror": "^5.60.2",
     "@types/crypto-js": "^4.0.2",
@@ -77,13 +77,13 @@
     "@types/jest": "^26.0.24",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.4",
-    "@types/node": "^16.4.9",
+    "@types/node": "^16.4.10",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1.10.7",
-    "@typescript-eslint/eslint-plugin": "^4.28.5",
-    "@typescript-eslint/parser": "^4.28.5",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/parser": "^4.29.0",
     "@vitejs/plugin-legacy": "^1.5.0",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
@@ -119,20 +119,20 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "tailwindcss": "^2.2.7",
     "ts-jest": "^27.0.4",
     "ts-node": "^10.1.0",
     "typescript": "4.3.5",
     "vite": "2.4.4",
-    "vite-plugin-compression": "^0.3.1",
+    "vite-plugin-compression": "^0.3.3",
     "vite-plugin-html": "^2.0.7",
-    "vite-plugin-imagemin": "^0.4.1",
-    "vite-plugin-mock": "^2.9.3",
+    "vite-plugin-imagemin": "^0.4.3",
+    "vite-plugin-mock": "^2.9.4",
     "vite-plugin-purge-icons": "^0.7.0",
     "vite-plugin-pwa": "^0.9.3",
-    "vite-plugin-style-import": "^1.0.1",
-    "vite-plugin-svg-icons": "^1.0.1",
+    "vite-plugin-style-import": "^1.1.0",
+    "vite-plugin-svg-icons": "^1.0.3",
     "vite-plugin-theme": "^0.8.1",
+    "vite-plugin-windicss": "^1.2.7",
     "vue-eslint-parser": "^7.10.0",
     "vue-tsc": "^0.2.2"
   },

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

src/design/tailwind.css

@@ -1,5 +1,7 @@
 import '/@/design/index.less';
-import '/@/design/tailwind.css';
+
+// Register windi
+import 'virtual:windi.css';
 // Register icon sprite
 import 'virtual:svg-icons-register';
 import App from './App.vue';

src/main.ts

@@ -5,8 +5,8 @@
         size="small"
         :loading="$attrs.loading"
         :title="item.title"
-        class="md:w-1/4 w-full md:!mt-0 !mt-4"
-        :class="[index + 1 < 4 && 'md:!mr-4']"
+        class="md:w-1/4 w-full !md:mt-0 !mt-4"
+        :class="[index + 1 < 4 && '!md:mr-4']"
         :canExpan="false"
       >
         <template #extra>

src/views/dashboard/analysis/components/GrowCard.vue

@@ -6,7 +6,7 @@
     <div class="md:flex enter-y">
       <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
 
-      <VisitSource class="md:w-1/3 md:!mx-4 md:!my-0 !my-4 w-full" :loading="loading" />
+      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
       <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
     </div>
   </div>

src/views/dashboard/analysis/index.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template v-for="item in items" :key="item">
-      <CardGrid class="md:!w-1/3 !w-full">
+      <CardGrid class="!md:w-1/3 !w-full">
         <span class="flex">
           <Icon :icon="item.icon" :color="item.color" size="30" />
           <span class="text-lg ml-4">{{ item.title }}</span>

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -10,11 +10,7 @@
         <QuickNav :loading="loading" class="enter-y" />
 
         <Card class="!my-4 enter-y" :loading="loading">
-          <img
-            style="height: 216px"
-            class="h-20 mx-auto"
-            src="../../../assets/svg/illustration.svg"
-          />
+          <img class="xl:h-50 h-30 mx-auto" src="../../../assets/svg/illustration.svg" />
         </Card>
 
         <SaleRadar :loading="loading" class="enter-y" />

src/views/dashboard/workbench/index.vue

@@ -53,12 +53,12 @@
       </Button> -->
     </FormItem>
     <ARow class="enter-x">
-      <ACol :xs="24" :md="8">
+      <ACol :md="8" :xs="24">
         <Button block @click="setLoginState(LoginStateEnum.MOBILE)">
           {{ t('sys.login.mobileSignInFormTitle') }}
         </Button>
       </ACol>
-      <ACol :md="8" :xs="24" class="!my-2 md:!my-0 xs:mx-0 md:mx-2">
+      <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">
         <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
           {{ t('sys.login.qrSignInFormTitle') }}
         </Button>