refactor: use `tailwindcss` replace `unocss` (#342)

* refactor: use `tailwindcss` replace `unocss`

* fix: update

.eslintignore

@@ -1,4 +1,10 @@
 public
 dist
 *.d.ts
-package.json
+package.json
+.eslintrc.js
+.prettierrc.js
+commitlint.config.js
+postcss.config.js
+tailwind.config.js
+stylelint.config.js

.vscode/extensions.json

@@ -3,13 +3,13 @@
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
     "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "lokalise.i18n-ally",
     "mikestead.dotenv",
     "eamodio.gitlens",
     "antfu.iconify",
-    "antfu.unocss",
     "Vue.volar"
   ]
 }

build/plugins.ts

@@ -1,5 +1,4 @@
 import { resolve } from "path";
-import Unocss from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
@@ -26,7 +25,6 @@ export function getPluginsList(command, VITE_LEGACY) {
     }),
     // jsx、tsx语法支持
     vueJsx(),
-    Unocss(),
     DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),

package.json

@@ -13,8 +13,8 @@
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
     "cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
     "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
-    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
@@ -128,7 +128,7 @@
     "picocolors": "^1.0.0",
     "postcss": "^8.4.16",
     "postcss-html": "^1.5.0",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "postcss-scss": "^4.0.4",
     "prettier": "^2.5.1",
     "pretty-quick": "3.1.1",
@@ -142,9 +142,9 @@
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
+    "tailwindcss": "^3.1.8",
     "terser": "^5.15.0",
     "typescript": "^4.7.4",
-    "unocss": "^0.45.15",
     "unplugin-vue-define-options": "0.7.3",
     "vite": "^3.1.0",
     "vite-plugin-mock": "^2.9.6",

postcss.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  plugins: [require("autoprefixer"), require("postcss-import")]
+  plugins: {
+    "postcss-import": {},
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };

src/components/ReFlowChart/src/Control.vue

@@ -102,7 +102,7 @@ onMounted(() => {
         v-for="(item, key) in titleLists"
         :key="key"
         :title="item.text"
-        class="dark:color-bg_color"
+        class="dark:text-bg_color"
         @mouseenter.prevent="onEnter(key)"
         @mouseleave.prevent="focusIndex = -1"
       >

src/components/ReFlowChart/src/NodePanel.vue

@@ -35,7 +35,7 @@ const nodeDragNode = item => {
   <!-- 左侧bpmn元素选择器 -->
   <div class="node-panel">
     <div
-      class="node-item dark:color-bg_color"
+      class="node-item dark:text-bg_color"
       v-for="item in props.nodeList"
       :key="item.text"
       @mousedown="nodeDragNode(item)"

src/components/ReIcon/src/Select.vue

@@ -118,7 +118,7 @@ watch(
 </script>
 
 <template>
-  <div class="selector w-350px">
+  <div class="selector w-[350px]">
     <el-input v-model="inputValue" disabled>
       <template #append>
         <el-popover
@@ -132,7 +132,7 @@ watch(
         >
           <template #reference>
             <div
-              class="w-40px h-32px cursor-pointer flex justify-center items-center"
+              class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
               @click="visible = !visible"
             >
               <IconifyIconOnline :icon="currentActiveType + icon" />
@@ -156,12 +156,12 @@ watch(
             >
               <el-divider class="tab-divider" border-style="dashed" />
               <el-scrollbar height="220px">
-                <ul class="flex-wrap px-2 ml-2">
+                <ul class="flex flex-wrap px-2 ml-2">
                   <li
                     v-for="(item, key) in pageList"
                     :key="key"
                     :title="item"
-                    class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    class="icon-item p-2 w-[1/10] cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
                     :style="iconItemStyle(item)"
                     @click="onChangeIcon(item)"
                   >

src/components/ReTable/src/bar.tsx

@@ -117,12 +117,12 @@ export default defineComponent({
       <>
         <div
           {...attrs}
-          class="w-99/100 mt-6 p-2 bg-white dark:bg-dark"
+          class="w-[99/100] mt-6 p-2 bg-white dark:bg-dark"
           v-loading={props.loading}
           element-loading-svg={loadingSvg}
           element-loading-svg-view-box="-10, -10, 50, 50"
         >
-          <div class="flex justify-between w-full h-60px p-4">
+          <div class="flex justify-between w-full h-[60px] p-4">
             <p class="font-bold truncate">{props.title}</p>
             <div class="flex items-center justify-around">
               <div class="flex mr-4">{slots?.buttons()}</div>

src/layout/components/navbar.vue

@@ -55,13 +55,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -73,7 +73,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -88,7 +88,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/notice/noticeItem.vue

@@ -45,7 +45,7 @@ function hoverDescription(event, description) {
 
 <template>
   <div
-    class="notice-container border-b-1 border-[#f0f0f0] dark:border-[#303030]"
+    class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
   >
     <el-avatar
       v-if="props.noticeItem.avatar"
@@ -54,7 +54,7 @@ function hoverDescription(event, description) {
       class="notice-container-avatar"
     />
     <div class="notice-container-text">
-      <div class="notice-text-title color-[#000000d9] dark:color-white">
+      <div class="notice-text-title text-[#000000d9] dark:text-white">
         <el-tooltip
           popper-class="notice-title-popper"
           :disabled="!titleTooltip"
@@ -93,7 +93,7 @@ function hoverDescription(event, description) {
           {{ props.noticeItem.description }}
         </div>
       </el-tooltip>
-      <div class="notice-text-datetime color-[#00000073] dark:color-white">
+      <div class="notice-text-datetime text-[#00000073] dark:text-white">
         {{ props.noticeItem.datetime }}
       </div>
     </div>

src/layout/components/panel/index.vue

@@ -21,12 +21,14 @@ emitter.on("openPanel", () => {
     <div ref="target" class="right-panel bg-white dark:bg-dark">
       <div class="right-panel-items">
         <div class="project-configuration">
-          <h3>项目配置</h3>
+          <h3 class="dark:text-white">项目配置</h3>
           <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
             <IconifyIconOffline icon="close" />
           </el-icon>
         </div>
-        <div class="border-b-1 border-[#dcdfe6] dark:border-[#303030]" />
+        <div
+          class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
+        />
         <slot />
       </div>
     </div>

src/layout/components/screenfull/index.vue

@@ -8,7 +8,7 @@ const { isFullscreen, toggle } = useFullscreen();
 
 <template>
   <div
-    class="screen-full w-36px h-48px flex-ac cursor-pointer navbar-bg-hover"
+    class="screen-full w-[36px] h-[48px] flex-ac cursor-pointer navbar-bg-hover"
     @click="toggle"
   >
     <FontIcon

src/layout/components/search/components/SearchFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-footer color-[#333] dark:color-white">
+  <div class="search-footer text-[#333] dark:text-white">
     <span class="search-footer-item">
       <enterOutlined class="icon" />
       确认

src/layout/components/search/index.vue

@@ -9,7 +9,7 @@ function handleSearch() {
 
 <template>
   <div
-    class="search-container w-40px h-48px flex-c cursor-pointer navbar-bg-hover"
+    class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
     @click="handleSearch"
   >
     <IconifyIconOffline icon="search" />

src/layout/components/setting/index.vue

@@ -309,7 +309,7 @@ nextTick(() => {
     <el-divider>界面显示</el-divider>
     <ul class="setting">
       <li>
-        <span>灰色模式</span>
+        <span class="dark:text-white">灰色模式</span>
         <el-switch
           v-model="settings.greyVal"
           inline-prompt
@@ -320,7 +320,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>色弱模式</span>
+        <span class="dark:text-white">色弱模式</span>
         <el-switch
           v-model="settings.weakVal"
           inline-prompt
@@ -331,7 +331,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>隐藏标签页</span>
+        <span class="dark:text-white">隐藏标签页</span>
         <el-switch
           v-model="settings.tabsVal"
           inline-prompt
@@ -342,7 +342,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>侧边栏Logo</span>
+        <span class="dark:text-white">侧边栏Logo</span>
         <el-switch
           v-model="logoVal"
           inline-prompt
@@ -355,7 +355,7 @@ nextTick(() => {
         />
       </li>
       <li>
-        <span>标签页持久化</span>
+        <span class="dark:text-white">标签页持久化</span>
         <el-switch
           v-model="settings.multiTagsCache"
           inline-prompt
@@ -367,7 +367,7 @@ nextTick(() => {
       </li>
 
       <li>
-        <span>标签风格</span>
+        <span class="dark:text-white">标签风格</span>
         <el-radio-group v-model="markValue" size="small" @change="onChange">
           <el-radio label="card">卡片</el-radio>
           <el-radio label="smart">灵动</el-radio>

src/layout/components/sidebar/horizontal.vue

@@ -67,13 +67,13 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
@@ -83,7 +83,7 @@ watch(
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -98,7 +98,7 @@ watch(
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/leftCollapse.vue

@@ -28,7 +28,7 @@ const toggleClick = () => {
     >
       <IconifyIconOffline
         :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-        class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
+        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
         @click="toggleClick"
       />
     </el-tooltip>

src/layout/components/sidebar/mixNav.vue

@@ -99,13 +99,13 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <globalization
-          class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
+          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span class="check-zh" v-show="locale === 'zh'">
@@ -115,7 +115,7 @@ watch(
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -130,7 +130,7 @@ watch(
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
           <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
-          <p v-if="username" class="dark:color-white">{{ username }}</p>
+          <p v-if="username" class="dark:text-white">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/topCollapse.vue

@@ -24,7 +24,7 @@ const toggleClick = () => {
   >
     <IconifyIconOffline
       :icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
-      class="inline-block align-middle hover:color-primary !dark:hover:color-white"
+      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
     />
   </div>
 </template>

src/layout/components/tag/index.vue

@@ -490,7 +490,7 @@ onMounted(() => {
         >
           <router-link
             :to="item.path"
-            class="!dark:color-text_color_primary !dark:hover:color-primary"
+            class="dark:!text-text_color_primary dark:hover:!text-primary"
           >
             {{ transformI18n(item.meta.title) }}
           </router-link>
@@ -555,7 +555,7 @@ onMounted(() => {
           placement="bottom-end"
           @command="handleCommand"
         >
-          <IconifyIconOffline icon="arrow-down" class="dark:color-white" />
+          <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item

src/layout/hooks/useNav.ts

@@ -35,7 +35,7 @@ export function useNav() {
 
   const getDropdownItemClass = computed(() => {
     return (locale, t) => {
-      return locale === t ? "" : "!dark:hover:color-primary";
+      return locale === t ? "" : "dark:hover:!text-primary";
     };
   });
 

src/layout/index.vue

@@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
                   {
                     default: () => [
                       !pureSetting.hiddenSideBar
-                        ? h(fullScreen, { class: "dark:color-white" })
-                        : h(exitScreen, { class: "dark:color-white" })
+                        ? h(fullScreen, { class: "dark:text-white" })
+                        : h(exitScreen, { class: "dark:text-white" })
                     ]
                   }
                 )

src/main.ts

@@ -14,7 +14,6 @@ import { injectResponsiveStorage } from "/@/utils/responsive";
 import Table from "@pureadmin/table";
 import PureDescriptions from "@pureadmin/descriptions";
 
-import "uno.css";
 import "animate.css";
 // 引入重置样式
 import "./style/reset.scss";

src/style/dark.scss

@@ -129,7 +129,8 @@ html.dark {
   }
 
   .vxe-modal--title,
-  .vxe-button--content {
+  .vxe-button--content,
+  .vxe-modal--header-title {
     color: var(--el-text-color-primary);
   }
 
@@ -137,6 +138,10 @@ html.dark {
     background: var(--el-color-primary) !important;
   }
 
+  .vxe-button {
+    background-color: transparent;
+  }
+
   /* 项目配置面板 */
   .right-panel-items {
     .el-divider__text {

src/style/index.scss

@@ -3,6 +3,7 @@
 @import "./element-plus.scss";
 @import "./sidebar.scss";
 @import "./dark.scss";
+@import "./tailwind.css";
 
 :root {
   --pure-transition-duration: 0.016s;

src/style/tailwind.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .bg-dark {
+    @apply bg-bg_color;
+  }
+
+  .wh-full {
+    @apply w-full h-full;
+  }
+
+  .flex-c {
+    @apply flex justify-center items-center;
+  }
+
+  .flex-ac {
+    @apply flex justify-around items-center;
+  }
+
+  .flex-bc {
+    @apply flex justify-between items-center;
+  }
+
+  .navbar-bg-hover {
+    @apply dark:text-white dark:hover:!bg-[#242424];
+  }
+}

src/views/able/ant-anchor.vue

@@ -37,8 +37,8 @@ function handleAnchorClick(e, link) {
         </span>
       </div>
     </template>
-    <div class="w-400px">
-      <Anchor class="float-left mt-200px" @click="handleAnchorClick">
+    <div class="w-[400px]">
+      <Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
         <AnchorLink href="one" title="测试one" />
         <AnchorLink href="two" title="测试two" />
         <AnchorLink href="three" title="测试three" />
@@ -47,21 +47,21 @@ function handleAnchorClick(e, link) {
       <el-scrollbar class="float-right overflow-auto" height="600px">
         <header
           id="one"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
           style="background: #409eff"
         >
           测试one
         </header>
         <header
           id="two"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
           style="background: #67c23a"
         >
           测试two
         </header>
         <header
           id="three"
-          class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
+          class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
           style="background: #f56c6c"
         >
           测试three

src/views/able/ant-treeSelect.vue

@@ -149,7 +149,7 @@ const onLoadData = treeNode => {
       <div>
         <span>线性样式：</span>
         <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
           v-model:value="value1"
           show-search
           :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -169,7 +169,7 @@ const onLoadData = treeNode => {
       <div>
         <span>虚拟滚动：</span>
         <TreeSelect
-          class="w-200px mt-6"
+          class="w-[200px] mt-6"
           v-model:value="checkedKeys"
           tree-checkable
           tree-default-expand-all
@@ -190,7 +190,7 @@ const onLoadData = treeNode => {
       <div>
         <span>可勾选：</span>
         <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
           v-model:value="value2"
           :tree-data="treeData2"
           tree-checkable
@@ -203,7 +203,7 @@ const onLoadData = treeNode => {
       <div>
         <span>异步加载：</span>
         <TreeSelect
-          class="w-200px"
+          class="w-[200px]"
           v-model:value="value3"
           tree-data-simple-mode
           :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

src/views/able/execl.vue

@@ -84,7 +84,7 @@ const exportExcel = () => {
       </div>
     </template>
     <el-button type="primary" @click="exportExcel">导出Excel </el-button>
-    <div class="h-100 mt-3">
+    <div class="h-[25rem] mt-3">
       <el-auto-resizer>
         <template #default="{ height, width }">
           <el-table-v2

src/views/able/line-tree.vue

@@ -30,14 +30,14 @@ let dataProps = {
     </template>
 
     <el-row :gutter="24">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
         <el-card>
           <template #header>
             <div class="card-header">
               <span class="font-medium"> 普通树结构 </span>
             </div>
           </template>
-          <div class="max-h-550px overflow-y-auto">
+          <div class="max-h-[550px] overflow-y-auto">
             <el-tree
               :data="menusData"
               :props="dataProps"
@@ -66,7 +66,7 @@ let dataProps = {
               <span class="font-medium"> 虚拟树结构 </span>
             </div>
           </template>
-          <div class="max-h-550px overflow-y-auto">
+          <div class="max-h-[550px] overflow-y-auto">
             <el-tree-v2
               :data="menusData"
               :props="dataProps"

src/views/able/pdf.vue

@@ -73,7 +73,7 @@ const onPrint = () => {
             {{ currentPage }} / {{ pageCount }}
           </el-pagination>
         </div>
-        <div class="w-170px flex-bc">
+        <div class="w-[170px] flex-bc">
           <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
             显示所有页面
           </el-checkbox>

src/views/able/print.vue

@@ -197,7 +197,7 @@ const tableData: User[] = [
           border
           :data="tableData"
           :row-class-name="tableRowClassName"
-          class="el-table w-full mt-40px mr-40px"
+          class="el-table w-full mt-[40px] mr-[40px]"
         >
           <el-table-column prop="date" label="Date" width="180" />
           <el-table-column prop="name" label="Name" width="180" />

src/views/able/qrcode.vue

@@ -40,19 +40,19 @@ const disabledClick = () => {
       </template>
       <el-row :gutter="20" justify="space-between">
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">基础用法</div>
             <ReQrcode :text="qrcodeText" />
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">img标签</div>
             <ReQrcode :text="qrcodeText" tag="img" />
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">样式配置</div>
             <ReQrcode
               :text="qrcodeText"
@@ -66,19 +66,19 @@ const disabledClick = () => {
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">点击事件</div>
             <ReQrcode :text="qrcodeText" @click="codeClick" />
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">异步内容</div>
             <ReQrcode :text="asyncTitle" />
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">失效</div>
             <ReQrcode
               :text="qrcodeText"
@@ -88,13 +88,13 @@ const disabledClick = () => {
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">logo配置</div>
             <ReQrcode :text="qrcodeText" :logo="avatars" />
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">logo样式</div>
             <ReQrcode
               :text="qrcodeText"
@@ -109,7 +109,7 @@ const disabledClick = () => {
           </el-card>
         </el-col>
         <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
-          <el-card shadow="hover" class="mb-10px text-center">
+          <el-card shadow="hover" class="mb-[10px] text-center">
             <div class="font-bold">大小配置</div>
             <ReQrcode :text="qrcodeText" :width="100" />
           </el-card>

src/views/able/swiper.vue

@@ -119,11 +119,11 @@ const swiperExample: SwiperExample[] = [
     </template>
     <el-row :gutter="10">
       <el-col v-for="item in swiperExample" :key="item.id" :span="12">
-        <h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
+        <h3 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h3>
         <swiper v-bind="item.options">
           <swiper-slide v-for="i in 5" :key="i">
             <div
-              class="flex justify-center items-center h-240px border-1px border-[#999] text-18px font-bold"
+              class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
             >
               Slide{{ i }}
             </div>

src/views/able/virtual-list/horizontal.vue

@@ -29,7 +29,7 @@ function changeMessage(message) {
   <div class="dynamic-scroller-demo">
     <div class="flex justify-around mb-4">
       <el-input
-        class="mr-2 !w-1/1.5"
+        class="mr-2 !w-[1/1.5]"
         clearable
         v-model="search"
         placeholder="Filter..."

src/views/able/virtual-list/index.vue

@@ -23,8 +23,8 @@ defineOptions({
       </div>
     </template>
     <div class="w-full flex justify-around flex-wrap">
-      <vertical-list class="h-500px w-500px" />
-      <horizontal-list class="h-500px w-500px" />
+      <vertical-list class="h-[500px] w-[500px]" />
+      <horizontal-list class="h-[500px] w-[500px]" />
     </div>
   </el-card>
 </template>

src/views/able/virtual-list/vertical.vue

@@ -33,7 +33,7 @@ function onResize() {
   <div class="dynamic-scroller-demo">
     <div class="flex justify-around mb-4">
       <el-input
-        class="mr-2 !w-1/1.5"
+        class="mr-2 !w-[1/1.5]"
         clearable
         v-model="search"
         placeholder="Filter..."

src/views/components/button/index.vue

@@ -18,7 +18,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
         <span class="font-medium">通过iframe引入按钮页面</span>
       </div>
     </template>
-    <iframe :src="url" frameborder="0" class="iframe w-full h-60vh" />
+    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
   </el-card>
 </template>
 

src/views/empty/index.vue

@@ -8,7 +8,7 @@ defineOptions({
 
 <template>
   <div class="back" title="返回上一页" @click="$router.go(-1)">
-    <back class="w-80px h-80px" />
+    <back class="w-[80px] h-[80px]" />
   </div>
 </template>
 

src/views/error/403.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noAccess />
     <div class="ml-12">
       <p

src/views/error/404.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noExist />
     <div class="ml-12">
       <p

src/views/error/500.vue

@@ -7,7 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <div class="flex justify-center items-center h-screen-sm">
+  <div class="flex justify-center items-center h-[640px]">
     <noServer />
     <div class="ml-12">
       <p

src/views/list/card/components/Card.vue

@@ -46,7 +46,7 @@ const cardLogoClass = computed(() => [
 
 <template>
   <div :class="cardClass">
-    <div class="list-card-item_detail !bg-white !dark:bg-dark">
+    <div class="list-card-item_detail bg-white dark:bg-dark">
       <el-row justify="space-between">
         <div :class="cardLogoClass">
           <shopIcon v-if="product.type === 1" />
@@ -68,7 +68,7 @@ const cardLogoClass = computed(() => [
             :disabled="!product.isSetup"
             max-height="2"
           >
-            <IconifyIconOffline icon="more-vertical" class="text-size-24px" />
+            <IconifyIconOffline icon="more-vertical" class="text-[24px]" />
             <template #dropdown>
               <el-dropdown-menu :disabled="!product.isSetup">
                 <el-dropdown-item @click="handleClickManage(product)">
@@ -82,10 +82,10 @@ const cardLogoClass = computed(() => [
           </el-dropdown>
         </div>
       </el-row>
-      <p class="list-card-item_detail--name color-text_color_primary">
+      <p class="list-card-item_detail--name text-text_color_primary">
         {{ product.name }}
       </p>
-      <p class="list-card-item_detail--desc color-text_color_regular">
+      <p class="list-card-item_detail--desc text-text_color_regular">
         {{ product.description }}
       </p>
     </div>

src/views/login/index.vue

@@ -102,13 +102,13 @@ dataThemeChange();
       <!-- 国际化 -->
       <el-dropdown trigger="click">
         <globalization
-          class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
+          class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -120,7 +120,7 @@ dataThemeChange();
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span class="check-en" v-show="locale === 'en'">
@@ -202,7 +202,7 @@ dataThemeChange();
 
             <Motion :delay="250">
               <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                   <el-checkbox v-model="checked">
                     {{ t("login.remember") }}
                   </el-checkbox>
@@ -228,7 +228,7 @@ dataThemeChange();
 
             <Motion :delay="300">
               <el-form-item>
-                <div class="w-full h-20px flex justify-between items-center">
+                <div class="w-full h-[20px] flex justify-between items-center">
                   <el-button
                     v-for="(item, index) in operates"
                     :key="index"

src/views/result/success.vue

@@ -57,7 +57,7 @@ const columns = [
               <span
                 role="img"
                 aria-label="dingding"
-                class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
+                class="anticon anticon-dingding flex items-center cursor-pointer"
                 style="color: rgb(0, 160, 233); margin-left: 8px"
               >
                 <svg

src/views/system/dept/index.vue

@@ -60,7 +60,7 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
     >
       <el-form-item label="部门名称：" prop="user">
         <el-input v-model="form.user" placeholder="请输入部门名称" clearable />

src/views/system/dict/config.vue

@@ -88,7 +88,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
       size="680px"
     >
       <template #header>
-        <span class="color-black dark:color-white">{{ drawTitle }}</span>
+        <span class="text-black dark:text-white">{{ drawTitle }}</span>
       </template>
       <el-divider />
       <!-- 列表 -->

src/views/system/dict/index.vue

@@ -224,10 +224,10 @@ function onHide() {
     <!-- 工具栏 -->
     <vxe-toolbar class="dark:bg-dark">
       <template #buttons>
-        <div class="ml-20px">
-          <label>字典名称：</label>
+        <div class="ml-[20px]">
+          <label class="dark:text-text_color_regular">字典名称： </label>
           <el-input
-            class="!w-200px"
+            class="!w-[200px]"
             v-model="dictData.filterName"
             :placeholder="t('buttons.hssearch')"
             @keyup.prevent="searchEvent"

src/views/system/role/index.vue

@@ -77,7 +77,7 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+      class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入角色名称" clearable />
@@ -175,7 +175,7 @@ onMounted(() => {
                 <el-dropdown-menu>
                   <el-dropdown-item>
                     <el-button
-                      class="reset-margin !h-20px !text-gray-500"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                       link
                       type="primary"
                       :size="size"
@@ -186,7 +186,7 @@ onMounted(() => {
                   </el-dropdown-item>
                   <el-dropdown-item>
                     <el-button
-                      class="reset-margin !h-20px !text-gray-500"
+                      class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                       link
                       type="primary"
                       :size="size"

src/views/system/user/index.vue

@@ -79,7 +79,7 @@ onMounted(() => {
         ref="formRef"
         :inline="true"
         :model="form"
-        class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
+        class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
@@ -187,7 +187,7 @@ onMounted(() => {
                   <el-dropdown-menu>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-20px !text-gray-500"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                         link
                         type="primary"
                         :size="size"
@@ -198,7 +198,7 @@ onMounted(() => {
                     </el-dropdown-item>
                     <el-dropdown-item>
                       <el-button
-                        class="reset-margin !h-20px !text-gray-500"
+                        class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                         link
                         type="primary"
                         :size="size"

src/views/system/user/tree.vue

@@ -69,8 +69,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="max-w-260px h-full min-h-780px bg-white dark:bg-dark">
-    <div class="flex items-center h-34px">
+  <div class="max-w-[260px] h-full min-h-[780px] bg-white dark:bg-dark">
+    <div class="flex items-center h-[34px]">
       <p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
         部门列表
       </p>
@@ -92,7 +92,7 @@ onMounted(async () => {
       </el-input>
       <el-dropdown>
         <IconifyIconOffline
-          class="w-28px cursor-pointer"
+          class="w-[28px] cursor-pointer"
           width="18px"
           icon="more-vertical"
         />
@@ -100,7 +100,7 @@ onMounted(async () => {
           <el-dropdown-menu>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('expand')"
@@ -111,7 +111,7 @@ onMounted(async () => {
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('unExpand')"
@@ -122,7 +122,7 @@ onMounted(async () => {
             </el-dropdown-item>
             <el-dropdown-item>
               <el-button
-                class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
+                class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
                 link
                 type="primary"
                 :icon="useRenderIcon('reset')"
@@ -159,7 +159,7 @@ onMounted(async () => {
             searchValue.trim().length > 0 &&
               node.label.includes(searchValue) &&
               'text-red-500',
-            highlightMap[node.id]?.highlight ? 'dark:color-primary' : ''
+            highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
           ]"
           :style="{
             background: highlightMap[node.id]?.highlight

src/views/tabs/index.vue

@@ -50,7 +50,7 @@ function onCloseTags() {
     <template #header>
       <div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
     </template>
-    <div class="flex-wrap items-center">
+    <div class="flex flex-wrap items-center">
       <p>query传参模式：</p>
       <el-button
         class="m-2"
@@ -64,7 +64,7 @@ function onCloseTags() {
 
     <el-divider />
 
-    <div class="flex-wrap items-center">
+    <div class="flex flex-wrap items-center">
       <p>params传参模式：</p>
       <el-button
         class="m-2"
@@ -78,7 +78,7 @@ function onCloseTags() {
 
     <el-divider />
     <TreeSelect
-      class="w-300px"
+      class="w-[300px]"
       v-model:value="value"
       show-search
       :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -94,7 +94,7 @@ function onCloseTags() {
       :tree-data="treeData"
     >
       <template #tagRender="{ closable, onClose, option }">
-        <el-tag class="mr-3px" :closable="closable" @close="onClose">
+        <el-tag class="mr-[3px]" :closable="closable" @close="onClose">
           {{ transformI18n(option.meta.title) }}
         </el-tag>
       </template>

src/views/welcome/components/columns.tsx

@@ -58,7 +58,7 @@ export function useColumns() {
       cellRenderer: () => {
         return lists.map(v => {
           return (
-            <el-tag class="mr-10px" type={v.type} size="small" effect="dark">
+            <el-tag class="mr-[10px]" type={v.type} size="small" effect="dark">
               {v.label}
             </el-tag>
           );

tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  corePlugins: {
+    preflight: false
+  },
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        bg_color: "var(--el-bg-color)",
+        primary: "var(--el-color-primary)",
+        primary_light_9: "var(--el-color-primary-light-9)",
+        text_color_primary: "var(--el-text-color-primary)",
+        text_color_regular: "var(--el-text-color-regular)",
+        text_color_disabled: "var(--el-text-color-disabled)"
+      }
+    }
+  }
+};

uno.config.ts

@@ -1,49 +0,0 @@
-import { defineConfig, presetUno } from "unocss";
-
-// https://github.com/unocss/unocss#readme
-export default defineConfig({
-  // unocss默认不扫描 node_modules、dist、css以及其扩展 具体实现：https://github.com/unocss/unocss/blob/03c8abe8f5020b3baaed3dfbfe8e2258dd041a7e/packages/vite/src/utils.ts#L3
-  exclude: [
-    "node_modules",
-    "dist",
-    ".git",
-    ".github",
-    ".husky",
-    ".vscode",
-    "build",
-    "locales",
-    "mock",
-    "public",
-    "types",
-    ".eslintrc.js",
-    ".prettierrc.js",
-    "postcss.config.js",
-    "stylelint.config.js",
-    "commitlint.config.js",
-    "README.md",
-    "CHANGELOG.md",
-    "README.en-US.md",
-    "CHANGELOG.en_US.md",
-    "CHANGELOG.zh_CN.md"
-  ],
-  presets: [presetUno({ dark: "class" })],
-  shortcuts: {
-    "bg-dark": "bg-bg_color",
-    "wh-full": "w-full h-full",
-    "flex-wrap": "flex flex-wrap",
-    "flex-c": "flex justify-center items-center",
-    "flex-ac": "flex justify-around items-center",
-    "flex-bc": "flex justify-between items-center",
-    "navbar-bg-hover": "dark:color-white !dark:hover:bg-[#242424]"
-  },
-  theme: {
-    colors: {
-      bg_color: "var(--el-bg-color)",
-      primary: "var(--el-color-primary)",
-      primary_light_9: "var(--el-color-primary-light-9)",
-      text_color_primary: "var(--el-text-color-primary)",
-      text_color_regular: "var(--el-text-color-regular)",
-      text_color_disabled: "var(--el-text-color-disabled)"
-    }
-  }
-});