refactor: 升级tailwindcss至v4版本，带来更快的构建速度、更简化的安装和配置、提供专属vite插件 (#1203)

src/views/system/dept/form.vue

@@ -104,7 +104,7 @@ defineExpose({ getRef });
         <el-form-item label="排序">
           <el-input-number
             v-model="newFormInline.sort"
-            class="!w-full"
+            class="w-full!"
             :min="0"
             :max="9999"
             controls-position="right"

src/views/system/dept/index.vue

@@ -39,14 +39,14 @@ function onFullscreen() {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="部门名称：" prop="name">
         <el-input
           v-model="form.name"
           placeholder="请输入部门名称"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
@@ -54,7 +54,7 @@ function onFullscreen() {
           v-model="form.status"
           placeholder="请选择状态"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         >
           <el-option label="启用" :value="1" />
           <el-option label="停用" :value="0" />

src/views/system/menu/form.vue

@@ -142,7 +142,7 @@ defineExpose({ getRef });
         <el-form-item label="菜单排序">
           <el-input-number
             v-model="newFormInline.rank"
-            class="!w-full"
+            class="w-full!"
             :min="1"
             :max="9999"
             controls-position="right"

src/views/system/menu/index.vue

@@ -40,14 +40,14 @@ function onFullscreen() {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="菜单名称：" prop="title">
         <el-input
           v-model="form.title"
           placeholder="请输入菜单名称"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         />
       </el-form-item>
       <el-form-item>

src/views/system/role/index.vue

@@ -31,7 +31,7 @@ const iconClass = computed(() => {
     "flex",
     "justify-center",
     "items-center",
-    "outline-none",
+    "outline-hidden",
     "rounded-[4px]",
     "cursor-pointer",
     "transition-colors",
@@ -96,14 +96,14 @@ onMounted(() => {
       ref="formRef"
       :inline="true"
       :model="form"
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="角色名称：" prop="name">
         <el-input
           v-model="form.name"
           placeholder="请输入角色名称"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         />
       </el-form-item>
       <el-form-item label="角色标识：" prop="code">
@@ -111,7 +111,7 @@ onMounted(() => {
           v-model="form.code"
           placeholder="请输入角色标识"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         />
       </el-form-item>
       <el-form-item label="状态：" prop="status">
@@ -119,7 +119,7 @@ onMounted(() => {
           v-model="form.status"
           placeholder="请选择状态"
           clearable
-          class="!w-[180px]"
+          class="w-[180px]!"
         >
           <el-option label="已启用" value="1" />
           <el-option label="已停用" value="0" />
@@ -145,7 +145,7 @@ onMounted(() => {
       :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
     >
       <PureTableBar
-        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
+        :class="[isShow && !deviceDetection() ? 'w-[60vw]!' : 'w-full']"
         style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
         title="角色管理（仅演示，操作后不生效）"
         :columns="columns"
@@ -263,7 +263,7 @@ onMounted(() => {
 
       <div
         v-if="isShow"
-        class="!min-w-[calc(100vw-60vw-268px)] w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+        class="min-w-[calc(100vw-60vw-268px)]! w-full mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
       >
         <div class="flex justify-between w-full px-3 pt-5 pb-4">
           <div class="flex">

src/views/system/role/utils/hook.tsx

@@ -94,11 +94,11 @@ export function useRole(treeRef: Ref) {
   ];
   // const buttonClass = computed(() => {
   //   return [
-  //     "!h-[20px]",
+  //     "h-[20px]!",
   //     "reset-margin",
-  //     "!text-gray-500",
-  //     "dark:!text-white",
-  //     "dark:hover:!text-primary"
+  //     "text-gray-500!",
+  //     "dark:text-white!",
+  //     "dark:hover:text-primary!"
   //   ];
   // });
 

src/views/system/user/index.vue

@@ -66,14 +66,14 @@ const {
         ref="formRef"
         :inline="true"
         :model="form"
-        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
+        class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
       >
         <el-form-item label="用户名称：" prop="username">
           <el-input
             v-model="form.username"
             placeholder="请输入用户名称"
             clearable
-            class="!w-[180px]"
+            class="w-[180px]!"
           />
         </el-form-item>
         <el-form-item label="手机号码：" prop="phone">
@@ -81,7 +81,7 @@ const {
             v-model="form.phone"
             placeholder="请输入手机号码"
             clearable
-            class="!w-[180px]"
+            class="w-[180px]!"
           />
         </el-form-item>
         <el-form-item label="状态：" prop="status">
@@ -89,7 +89,7 @@ const {
             v-model="form.status"
             placeholder="请选择"
             clearable
-            class="!w-[180px]"
+            class="w-[180px]!"
           >
             <el-option label="已开启" value="1" />
             <el-option label="已关闭" value="0" />
@@ -143,7 +143,7 @@ const {
             </div>
             <el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
               <template #reference>
-                <el-button type="danger" text class="mr-1">
+                <el-button type="danger" text class="mr-1!">
                   批量删除
                 </el-button>
               </template>
@@ -198,7 +198,7 @@ const {
               </el-popconfirm>
               <el-dropdown>
                 <el-button
-                  class="ml-3 mt-[2px]"
+                  class="ml-3! mt-[2px]!"
                   link
                   type="primary"
                   :size="size"

src/views/system/user/tree.vue

@@ -4,7 +4,7 @@ import { ref, computed, watch, getCurrentInstance } from "vue";
 
 import Dept from "~icons/ri/git-branch-line";
 // import Reset from "~icons/ri/restart-line";
-import More2Fill from "~icons/ri/more-2-fill";
+import More2Fill from "~icons/ri/more-2-fill?width=18&height=18";
 import OfficeBuilding from "~icons/ep/office-building";
 import LocationCompany from "~icons/ep/add-location";
 import ExpandIcon from "./svg/expand.svg?component";
@@ -35,12 +35,12 @@ const defaultProps = {
 };
 const buttonClass = computed(() => {
   return [
-    "!h-[20px]",
-    "!text-sm",
+    "h-[20px]!",
+    "text-sm!",
     "reset-margin",
-    "!text-[var(--el-text-color-regular)]",
-    "dark:!text-white",
-    "dark:hover:!text-primary"
+    "text-(--el-text-color-regular)!",
+    "dark:text-white!",
+    "dark:hover:text-primary!"
   ];
 });
 
@@ -117,11 +117,7 @@ defineExpose({ onTreeReset });
         </template>
       </el-input>
       <el-dropdown :hide-on-click="false">
-        <IconifyIconOffline
-          class="w-[28px] cursor-pointer"
-          width="18px"
-          :icon="More2Fill"
-        />
+        <More2Fill class="w-[28px] cursor-pointer outline-hidden" />
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item>
@@ -166,7 +162,7 @@ defineExpose({ onTreeReset });
         <template #default="{ node, data }">
           <div
             :class="[
-              'rounded',
+              'rounded-sm',
               'flex',
               'items-center',
               'select-none',
@@ -194,7 +190,7 @@ defineExpose({ onTreeReset });
                     : Dept
               "
             />
-            <span class="!w-[120px] !truncate" :title="node.label">
+            <span class="w-[120px]! truncate!" :title="node.label">
               {{ node.label }}
             </span>
           </div>

src/views/system/user/utils/hook.tsx

@@ -163,11 +163,11 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   ];
   const buttonClass = computed(() => {
     return [
-      "!h-[20px]",
+      "h-[20px]!",
       "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
+      "text-gray-500!",
+      "dark:text-white!",
+      "dark:hover:text-primary!"
     ];
   });
   // 重置的新密码