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

build/plugins.ts

@@ -5,6 +5,7 @@ import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import type { PluginOption } from "vite";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import tailwindcss from "@tailwindcss/vite";
 import { configCompressPlugin } from "./compress";
 import removeNoMatch from "vite-plugin-router-warn";
 import { visualizer } from "rollup-plugin-visualizer";
@@ -19,6 +20,7 @@ export function getPluginsList(
 ): PluginOption[] {
   const lifecycle = process.env.npm_lifecycle_event;
   return [
+    tailwindcss(),
     vue(),
     // jsx、tsx语法支持
     vueJsx(),

package.json

@@ -121,6 +121,7 @@
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/vue": "4.2.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@tailwindcss/vite": "^4.0.13",
     "@types/codemirror": "^5.60.15",
     "@types/dagre": "^0.7.52",
     "@types/intro.js": "^5.1.5",
@@ -135,7 +136,6 @@
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
-    "autoprefixer": "^10.4.20",
     "boxen": "^8.0.1",
     "code-inspector-plugin": "^0.19.2",
     "cssnano": "^7.0.6",
@@ -150,7 +150,7 @@
     "lint-staged": "^15.3.0",
     "postcss": "^8.5.1",
     "postcss-html": "^1.8.0",
-    "postcss-import": "^16.1.0",
+    "postcss-load-config": "^6.0.1",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.4.2",
     "rimraf": "^6.0.1",
@@ -162,7 +162,7 @@
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-prettier": "^5.0.2",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.13",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vite-plugin-cdn-import": "^1.0.1",

postcss.config.js

@@ -3,10 +3,6 @@
 /** @type {import('postcss-load-config').Config} */
 export default {
   plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
     ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
   }
 };

src/components/ReCropper/src/index.tsx

@@ -119,7 +119,7 @@ export default defineComponent({
         "p-[6px]",
         "h-[30px]",
         "w-[30px]",
-        "outline-none",
+        "outline-hidden",
         "rounded-[4px]",
         "cursor-pointer",
         "hover:bg-[rgba(0,0,0,0.06)]"

src/components/ReDialog/index.vue

@@ -79,7 +79,7 @@ const fullscreenClass = computed(() => {
     "el-dialog__close",
     "-translate-x-2",
     "cursor-pointer",
-    "hover:!text-[red]"
+    "hover:text-[red]!"
   ];
 });
 

src/components/RePureTableBar/src/bar.tsx

@@ -87,9 +87,9 @@ export default defineComponent({
         "text-black",
         "dark:text-white",
         "duration-100",
-        "hover:!text-primary",
+        "hover:text-primary!",
         "cursor-pointer",
-        "outline-none"
+        "outline-hidden"
       ];
     });
 
@@ -255,12 +255,12 @@ export default defineComponent({
         <div
           {...attrs}
           class={[
-            "w-[99/100]",
+            "w-99/100",
             "px-2",
             "pb-2",
             "bg-bg_color",
             isFullscreen.value
-              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              ? ["w-full!", "h-full!", "z-2002", "fixed", "inset-0"]
               : "mt-2"
           ]}
         >
@@ -317,7 +317,7 @@ export default defineComponent({
               >
                 <div class={[topClass.value]}>
                   <el-checkbox
-                    class="!-mr-1"
+                    class="-mr-1!"
                     label="列展示"
                     v-model={checkAll.value}
                     indeterminate={isIndeterminate.value}
@@ -347,8 +347,8 @@ export default defineComponent({
                                 class={[
                                   "drag-btn w-[16px] mr-2",
                                   isFixedColumn(item)
-                                    ? "!cursor-no-drop"
+                                    ? "cursor-no-drop!"
-                                    : "!cursor-grab"
+                                    : "cursor-grab!"
                                 ]}
                                 onMouseenter={(event: {
                                   preventDefault: () => void;

src/components/ReVxeTableBar/src/bar.tsx

@@ -80,9 +80,9 @@ export default defineComponent({
         "text-black",
         "dark:text-white",
         "duration-100",
-        "hover:!text-primary",
+        "hover:text-primary!",
         "cursor-pointer",
-        "outline-none"
+        "outline-hidden"
       ];
     });
 
@@ -248,12 +248,12 @@ export default defineComponent({
         <div
           {...attrs}
           class={[
-            "w-[99/100]",
+            "w-99/100",
             "px-2",
             "pb-2",
             "bg-bg_color",
             isFullscreen.value
-              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              ? ["w-full!", "h-full!", "z-2002", "fixed", "inset-0"]
               : "mt-2"
           ]}
         >
@@ -310,7 +310,7 @@ export default defineComponent({
               >
                 <div class={[topClass.value]}>
                   <el-checkbox
-                    class="!-mr-1"
+                    class="-mr-1!"
                     label="列展示"
                     v-model={checkAll.value}
                     indeterminate={isIndeterminate.value}
@@ -340,8 +340,8 @@ export default defineComponent({
                                 class={[
                                   "drag-btn w-[16px] mr-2",
                                   isFixedColumn(item)
-                                    ? "!cursor-no-drop"
+                                    ? "cursor-no-drop!"
-                                    : "!cursor-grab"
+                                    : "cursor-grab!"
                                 ]}
                                 onMouseenter={(event: {
                                   preventDefault: () => void;

src/layout/components/lay-navbar/index.vue

@@ -33,7 +33,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
 </script>
 
 <template>
-  <div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
+  <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
     <LaySidebarTopCollapse
       v-if="device === 'mobile'"
       class="hamburger-container"
@@ -54,13 +54,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <GlobalizationIcon
-          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-hidden"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -72,7 +72,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span v-show="locale === 'en'" class="check-en">

src/layout/components/lay-panel/index.vue

@@ -16,7 +16,7 @@ const iconClass = computed(() => {
     "flex",
     "justify-center",
     "items-center",
-    "outline-none",
+    "outline-hidden",
     "rounded-[4px]",
     "cursor-pointer",
     "transition-colors",

src/layout/components/lay-setting/index.vue

@@ -429,7 +429,7 @@ onUnmounted(() => removeMatchMedia);
               height="20"
             />
             <div
-              class="flex-grow border-b border-dashed"
+              class="grow border-b border-dashed"
               style="border-color: var(--el-color-primary)"
             />
             <IconifyIconOffline

src/layout/components/lay-sidebar/NavHorizontal.vue

@@ -84,13 +84,13 @@ onMounted(() => {
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <GlobalizationIcon
-          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-hidden"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span v-show="locale === 'zh'" class="check-zh">
@@ -100,7 +100,7 @@ onMounted(() => {
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span v-show="locale === 'en'" class="check-en">

src/layout/components/lay-sidebar/NavMix.vue

@@ -105,13 +105,13 @@ watch(
       <!-- 国际化 -->
       <el-dropdown id="header-translation" trigger="click">
         <GlobalizationIcon
-          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-hidden"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <span v-show="locale === 'zh'" class="check-zh">
@@ -121,7 +121,7 @@ watch(
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span v-show="locale === 'en'" class="check-en">

src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue

@@ -105,12 +105,12 @@ watch(
 </script>
 
 <template>
-  <el-breadcrumb class="!leading-[50px] select-none" separator="/">
+  <el-breadcrumb class="leading-[50px]! select-none" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item
         v-for="item in levelList"
         :key="item.path"
-        class="!inline !items-stretch"
+        class="inline! items-stretch!"
       >
         <a @click.prevent="handleLink(item)">
           {{ transformI18n(item.meta.title) }}

src/layout/components/lay-sidebar/components/SidebarItem.vue

@@ -144,7 +144,7 @@ function resolvePath(routePath) {
             item?.pathList?.length === 2)
         "
         truncated
-        class="!w-full !pl-4 !text-inherit"
+        class="w-full! pl-4! text-inherit!"
       >
         {{ transformI18n(onlyOneChild.meta.title) }}
       </el-text>
@@ -156,7 +156,7 @@ function resolvePath(routePath) {
               offset: [0, -10],
               theme: tooltipEffect
             }"
-            class="!w-full !text-inherit"
+            class="w-full! text-inherit!"
           >
             {{ transformI18n(onlyOneChild.meta.title) }}
           </ReText>
@@ -196,9 +196,9 @@ function resolvePath(routePath) {
           theme: tooltipEffect
         }"
         :class="{
-          '!w-full': true,
+          'w-full!': true,
-          '!text-inherit': true,
+          'text-inherit!': true,
-          '!pl-4':
+          'pl-4!':
             layout !== 'horizontal' &&
             isCollapse &&
             !toRaw(item.meta.icon) &&

src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue

@@ -32,7 +32,7 @@ const toggleClick = () => {
   >
     <IconifyIconOffline
       :icon="isActive ? MenuFold : MenuUnfold"
-      class="inline-block align-middle hover:text-primary dark:hover:!text-white"
+      class="inline-block align-middle hover:text-primary dark:hover:text-white!"
     />
   </div>
 </template>

src/layout/components/lay-tag/index.vue

@@ -589,7 +589,7 @@ onBeforeUnmount(() => {
         >
           <template v-if="showModel !== 'chrome'">
             <span
-              class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
+              class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
             >
               {{ transformI18n(item.meta.title) }}
             </span>

src/layout/hooks/useNav.ts

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

src/style/tailwind.css

@@ -1,21 +1,44 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
-@tailwind utilities;
 
-@layer components {
+@custom-variant dark (&:is(.dark *));
-  .flex-c {
+
+@theme {
+  --color-bg_color: var(--el-bg-color);
+  --color-primary: var(--el-color-primary);
+  --color-text_color_primary: var(--el-text-color-primary);
+  --color-text_color_regular: var(--el-text-color-regular);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@utility flex-c {
   @apply flex justify-center items-center;
 }
 
-  .flex-ac {
+@utility flex-ac {
   @apply flex justify-around items-center;
 }
 
-  .flex-bc {
+@utility flex-bc {
   @apply flex justify-between items-center;
 }
 
-  .navbar-bg-hover {
+@utility navbar-bg-hover {
-    @apply dark:text-white dark:hover:!bg-[#242424];
+  @apply dark:text-white dark:hover:bg-[#242424]!;
-  }
 }

src/views/able/directives.vue

@@ -76,7 +76,7 @@ function onReset() {
           immediate: true,
           timeout: 1000
         }"
-        class="!w-[200px]"
+        class="w-[200px]!"
         clearable
         @clear="onInput"
       />
@@ -86,7 +86,7 @@ function onReset() {
       <el-input
         v-model="searchTwo"
         v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
-        class="!w-[200px]"
+        class="w-[200px]!"
         clearable
       />
     </div>
@@ -100,7 +100,7 @@ function onReset() {
           timeout: 400,
           params: { name: '小明', sex: '男' }
         }"
-        class="!w-[200px]"
+        class="w-[200px]!"
         clearable
       />
     </div>
@@ -112,7 +112,7 @@ function onReset() {
       <el-input
         v-model="searchFour"
         v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
-        class="!w-[200px]"
+        class="w-[200px]!"
         clearable
       />
     </div>
@@ -125,7 +125,7 @@ function onReset() {
           fn: onInputFive,
           params: { name: '小明', sex: '男' }
         }"
-        class="!w-[200px]"
+        class="w-[200px]!"
         clearable
       />
     </div>
@@ -134,7 +134,7 @@ function onReset() {
 
     <div class="mb-2">
       文本复制指令（双击输入框内容即可复制）
-      <el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" />
+      <el-input v-model="searchSix" v-copy="searchSix" class="w-[200px]!" />
     </div>
     <div>
       文本复制指令（自定义触发事件，单击复制）

src/views/able/print/index.vue

@@ -83,7 +83,7 @@ const tableData: User[] = [
         <span class="font-medium">打印功能（报表、图表、图片）</span>
         <el-select
           v-model="value"
-          class="!w-[100px] mr-2"
+          class="w-[100px]! mr-2"
           placeholder="Select"
           size="small"
         >

src/views/able/watermark.vue

@@ -53,7 +53,7 @@ onBeforeUnmount(() => {
         代码位置 src/views/able/watermark.vue
       </el-link>
     </template>
-    <el-space wrap class="!mb-2">
+    <el-space wrap class="mb-2!">
       <span> 请输入要创建水印的值：</span>
       <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
       <span>请选择要创建水印的颜色：</span>

src/views/able/wavesurfer/index.vue

@@ -103,7 +103,7 @@ onBeforeUnmount(() => {
     </template>
     <div
       v-loading="loading"
-      class="w-8/12 !m-auto !mt-[20px]"
+      class="w-8/12 m-auto! mt-[20px]!"
       element-loading-background="transparent"
     >
       <div ref="wavesurferRef" />

src/views/about/columns.tsx

@@ -7,7 +7,7 @@ export function useColumns() {
       minWidth: 100,
       cellRenderer: () => {
         return (
-          <el-tag size="large" class="!text-base">
+          <el-tag size="large" class="text-base!">
             {version}
           </el-tag>
         );
@@ -18,7 +18,7 @@ export function useColumns() {
       minWidth: 120,
       cellRenderer: () => {
         return (
-          <el-tag size="large" class="!text-base">
+          <el-tag size="large" class="text-base!">
             {lastBuildTime}
           </el-tag>
         );
@@ -29,7 +29,7 @@ export function useColumns() {
       minWidth: 140,
       cellRenderer: () => {
         return (
-          <el-tag size="large" class="!text-base">
+          <el-tag size="large" class="text-base!">
             {engines.node}
           </el-tag>
         );
@@ -40,7 +40,7 @@ export function useColumns() {
       minWidth: 140,
       cellRenderer: () => {
         return (
-          <el-tag size="large" class="!text-base">
+          <el-tag size="large" class="text-base!">
             {engines.pnpm}
           </el-tag>
         );

src/views/account-settings/index.vue

@@ -70,12 +70,12 @@ getMine().then(res => {
   <el-container class="h-full">
     <el-aside
       v-if="isOpen"
-      class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
+      class="pure-account-settings overflow-hidden px-2 dark:bg-(--el-bg-color)! border-r-[1px] border-[var(--pure-border-color)]"
       :width="deviceDetection() ? '180px' : '240px'"
     >
       <el-menu :default-active="witchPane" class="pure-account-settings-menu">
         <el-menu-item
-          class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]"
+          class="hover:transition-all! hover:duration-200! hover:text-base! h-[50px]!"
           @click="router.go(-1)"
         >
           <div class="flex items-center">
@@ -86,10 +86,10 @@ getMine().then(res => {
         <div class="flex items-center ml-8 mt-4 mb-4">
           <el-avatar :size="48" :src="userInfo.avatar" />
           <div class="ml-4 flex flex-col max-w-[130px]">
-            <ReText class="font-bold !self-baseline">
+            <ReText class="font-bold self-baseline!">
               {{ userInfo.nickname }}
             </ReText>
-            <ReText class="!self-baseline" type="info">
+            <ReText class="self-baseline!" type="info">
               {{ userInfo.username }}
             </ReText>
           </div>

src/views/components/animatecss.vue

@@ -36,6 +36,6 @@ watch(animate, () => {
         代码位置 src/views/components/animatecss.vue
       </el-link>
     </template>
-    <ReAnimateSelector v-model="animate" class="!w-[200px]" />
+    <ReAnimateSelector v-model="animate" class="w-[200px]!" />
   </el-card>
 </template>

src/views/components/check-button.vue

@@ -221,7 +221,7 @@ watch(size, val =>
     <p>可控制间距的按钮样式</p>
     <el-slider
       v-model="spaceSize"
-      class="mb-2 !w-[300px]"
+      class="mb-2 w-[300px]!"
       :show-tooltip="false"
       :disabled="size === 'disabled'"
     />

src/views/components/date-picker.vue

@@ -164,7 +164,7 @@ watch(size, val =>
     <el-date-picker
       v-model="value"
       type="date"
-      class="!w-[160px]"
+      class="w-[160px]!"
       placeholder="请选择"
       :disabled-date="disabledDate"
       :shortcuts="shortcuts"
@@ -180,7 +180,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value1"
         type="week"
-        class="!w-[160px]"
+        class="w-[160px]!"
         format="YYYY年第ww周"
         placeholder="选择某年中的某周"
         :size="dynamicSize"
@@ -189,7 +189,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value2"
         type="month"
-        class="!w-[160px]"
+        class="w-[160px]!"
         placeholder="选择某月"
         :size="dynamicSize"
         :disabled="size === 'disabled'"
@@ -197,7 +197,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value3"
         type="year"
-        class="!w-[160px]"
+        class="w-[160px]!"
         placeholder="选择某年"
         :size="dynamicSize"
         :disabled="size === 'disabled'"
@@ -205,7 +205,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value4"
         type="dates"
-        class="!w-[160px]"
+        class="w-[160px]!"
         placeholder="选择多个日期"
         :size="dynamicSize"
         :disabled="size === 'disabled'"
@@ -216,7 +216,7 @@ watch(size, val =>
     <el-date-picker
       v-model="value5"
       type="daterange"
-      class="!w-[240px]"
+      class="w-[240px]!"
       unlink-panels
       range-separator="至"
       start-placeholder="开始时间"
@@ -261,7 +261,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value7"
         type="date"
-        class="!w-[160px]"
+        class="w-[160px]!"
         placeholder="请选择日期"
         format="YYYY/MM/DD"
         :value-format="dateFormat"
@@ -275,7 +275,7 @@ watch(size, val =>
     <el-date-picker
       v-model="value8"
       type="date"
-      class="!w-[160px]"
+      class="w-[160px]!"
       placeholder="请选择日期"
       :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
       :size="dynamicSize"

src/views/components/datetime-picker.vue

@@ -190,7 +190,7 @@ watch(size, val =>
     <el-date-picker
       v-model="value"
       type="datetime"
-      class="!w-[200px]"
+      class="w-[200px]!"
       placeholder="请选择日期时间"
       :shortcuts="shortcuts"
       :size="dynamicSize"
@@ -213,7 +213,7 @@ watch(size, val =>
       <el-date-picker
         v-model="value1"
         type="datetime"
-        class="!w-[200px]"
+        class="w-[200px]!"
         placeholder="请选择日期时间"
         format="YYYY/MM/DD hh:mm:ss"
         :value-format="datetimeFormat"

src/views/components/dialog/form.vue

@@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
     <el-form-item label="姓名">
       <el-input
         v-model="newFormInline.user"
-        class="!w-[220px]"
+        class="w-[220px]!"
         placeholder="请输入姓名"
       />
     </el-form-item>
     <el-form-item label="城市">
       <el-select
         v-model="newFormInline.region"
-        class="!w-[220px]"
+        class="w-[220px]!"
         placeholder="请选择城市"
       >
         <el-option label="上海" value="上海" />

src/views/components/dialog/formPrimitive.vue

@@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
 </script>
 
 <template>
-  <el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
+  <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
 </template>

src/views/components/drawer/form.vue

@@ -28,14 +28,14 @@ const newFormInline = ref(props.formInline);
     <el-form-item label="姓名">
       <el-input
         v-model="newFormInline.user"
-        class="!w-[220px]"
+        class="w-[220px]!"
         placeholder="请输入姓名"
       />
     </el-form-item>
     <el-form-item label="城市">
       <el-select
         v-model="newFormInline.region"
-        class="!w-[220px]"
+        class="w-[220px]!"
         placeholder="请选择城市"
       >
         <el-option label="上海" value="上海" />

src/views/components/drawer/formPrimitive.vue

@@ -18,5 +18,5 @@ const data = useVModel(props, "data", emit);
 </script>
 
 <template>
-  <el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
+  <el-input v-model="data" class="w-[220px]!" placeholder="请输入内容" />
 </template>

src/views/components/tag.vue

@@ -156,7 +156,7 @@ const handleInputConfirm = () => {
       v-if="inputVisible"
       ref="InputRef"
       v-model="inputValue"
-      class="ml-1 !w-20"
+      class="ml-1 w-20!"
       size="small"
       @keyup.enter="handleInputConfirm"
       @blur="handleInputConfirm"

src/views/components/time-picker.vue

@@ -91,7 +91,7 @@ const endTime = ref("");
         <el-time-picker
           v-model="value"
           placeholder="请选择时间"
-          class="!w-[140px]"
+          class="w-[140px]!"
           :size="dynamicSize"
           :disabled="size === 'disabled'"
         />
@@ -100,7 +100,7 @@ const endTime = ref("");
           v-model="value1"
           arrow-control
           placeholder="请选择时间"
-          class="!w-[140px]"
+          class="w-[140px]!"
           :size="dynamicSize"
           :disabled="size === 'disabled'"
         />
@@ -110,7 +110,7 @@ const endTime = ref("");
       <p class="mb-2">限制时间选择范围</p>
       <el-time-picker
         v-model="value2"
-        class="!w-[140px]"
+        class="w-[140px]!"
         :disabled-hours="disabledHours"
         :disabled-minutes="disabledMinutes"
         :disabled-seconds="disabledSeconds"
@@ -123,7 +123,7 @@ const endTime = ref("");
       <p class="mb-2">任意时间范围</p>
       <el-time-picker
         v-model="value3"
-        class="!w-[220px]"
+        class="w-[220px]!"
         is-range
         range-separator="至"
         start-placeholder="开始时间"
@@ -153,7 +153,7 @@ const endTime = ref("");
       <el-time-select
         v-model="value4"
         placeholder="请选择时间"
-        class="!w-[140px]"
+        class="w-[140px]!"
         start="08:30"
         step="00:15"
         end="18:30"
@@ -165,7 +165,7 @@ const endTime = ref("");
       <el-time-select
         v-model="value5"
         placeholder="请选择时间"
-        class="!w-[140px]"
+        class="w-[140px]!"
         start="00:00"
         step="00:30"
         end="23:59"
@@ -179,7 +179,7 @@ const endTime = ref("");
         <el-time-select
           v-model="startTime"
           placeholder="开始时间"
-          class="!w-[140px]"
+          class="w-[140px]!"
           :max-time="endTime"
           start="08:30"
           step="00:15"
@@ -190,7 +190,7 @@ const endTime = ref("");
         <el-time-select
           v-model="endTime"
           placeholder="结束时间"
-          class="!w-[140px]"
+          class="w-[140px]!"
           :min-time="startTime"
           start="08:30"
           step="00:15"

src/views/components/upload/form.vue

@@ -58,7 +58,7 @@ const resetForm = formEl => {
         drag
         multiple
         action="#"
-        class="!w-[200px]"
+        class="w-[200px]!"
         :auto-upload="false"
       >
         <div class="el-upload__text">
@@ -79,7 +79,7 @@ const resetForm = formEl => {
       <el-date-picker
         v-model="validateForm.date"
         type="datetime"
-        class="!w-[200px]"
+        class="w-[200px]!"
         placeholder="请选择日期时间"
         value-format="YYYY-MM-DD HH:mm:ss"
       />

src/views/components/upload/index.vue

@@ -173,7 +173,7 @@ const onDownload = () => {
             id="pure-upload-item"
             :class="[
               'el-upload-list__item-actions',
-              fileList.length > 1 && '!cursor-move'
+              fileList.length > 1 && 'cursor-move!'
             ]"
           >
             <span

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

@@ -24,7 +24,7 @@ const filteredItems = computed(() => {
       水平模式 horizontal
       <el-input
         v-model="search"
-        class="mr-2 !w-[1/1.5]"
+        class="mr-2 w-[1/1.5]!"
         clearable
         placeholder="Filter..."
         style="width: 300px"

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

@@ -24,7 +24,7 @@ const filteredItems = computed(() => {
       垂直模式 vertical
       <el-input
         v-model="search"
-        class="!w-[350px]"
+        class="w-[350px]!"
         clearable
         placeholder="Filter..."
       />

src/views/login/index.vue

@@ -134,13 +134,13 @@ watch(loginDay, value => {
       <!-- 国际化 -->
       <el-dropdown trigger="click">
         <globalization
-          class="hover:text-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-hidden duration-300"
         />
         <template #dropdown>
           <el-dropdown-menu class="translation">
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
               @click="translationCh"
             >
               <IconifyIconOffline
@@ -152,7 +152,7 @@ watch(loginDay, value => {
             </el-dropdown-item>
             <el-dropdown-item
               :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
+              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
               @click="translationEn"
             >
               <span v-show="locale === 'en'" class="check-en">
@@ -172,7 +172,7 @@ watch(loginDay, value => {
         <div class="login-form">
           <avatar class="avatar" />
           <Motion>
-            <h2 class="outline-none">
+            <h2 class="outline-hidden">
               <TypeIt
                 :options="{ strings: [title], cursor: false, speed: 100 }"
               />

src/views/monitor/logs/login/index.vue

@@ -39,14 +39,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-99/100 pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="用户名" prop="username">
         <el-input
           v-model="form.username"
           placeholder="请输入用户名"
           clearable
-          class="!w-[150px]"
+          class="w-[150px]!"
         />
       </el-form-item>
       <el-form-item label="登录状态" prop="status">
@@ -54,7 +54,7 @@ const {
           v-model="form.status"
           placeholder="请选择"
           clearable
-          class="!w-[150px]"
+          class="w-[150px]!"
         >
           <el-option label="成功" value="1" />
           <el-option label="失败" value="0" />

src/views/monitor/logs/operation/index.vue

@@ -39,14 +39,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-99/100 pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input
           v-model="form.module"
           placeholder="请输入所属模块"
           clearable
-          class="!w-[170px]"
+          class="w-[170px]!"
         />
       </el-form-item>
       <el-form-item label="操作状态" prop="status">
@@ -54,7 +54,7 @@ const {
           v-model="form.status"
           placeholder="请选择"
           clearable
-          class="!w-[150px]"
+          class="w-[150px]!"
         >
           <el-option label="成功" value="1" />
           <el-option label="失败" value="0" />

src/views/monitor/logs/system/index.vue

@@ -42,14 +42,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-99/100 pl-8 pt-[12px] overflow-auto"
     >
       <el-form-item label="所属模块" prop="module">
         <el-input
           v-model="form.module"
           placeholder="请输入所属模块"
           clearable
-          class="!w-[170px]"
+          class="w-[170px]!"
         />
       </el-form-item>
       <el-form-item label="请求时间" prop="requestTime">
@@ -137,7 +137,7 @@ const {
         >
           <template #operation="{ row }">
             <el-button
-              class="reset-margin !outline-none"
+              class="reset-margin outline-hidden!"
               link
               type="primary"
               :size="size"

src/views/monitor/online/index.vue

@@ -33,14 +33,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-99/100 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>

src/views/permission/page/index.vue

@@ -60,7 +60,7 @@ function onChange() {
           代码位置 src/views/permission/page/index.vue
         </el-link>
       </template>
-      <el-select v-model="username" class="!w-[160px]" @change="onChange">
+      <el-select v-model="username" class="w-[160px]!" @change="onChange">
         <el-option
           v-for="item in options"
           :key="item.value"

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-99/100 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-99/100 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-99/100 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",
+  //     "text-gray-500!",
-  //     "dark:!text-white",
+  //     "dark:text-white!",
-  //     "dark:hover:!text-primary"
+  //     "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-99/100 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" />

src/views/system/user/tree.vue

@@ -35,12 +35,12 @@ const defaultProps = {
 };
 const buttonClass = computed(() => {
   return [
-    "!h-[20px]",
+    "h-[20px]!",
-    "!text-sm",
+    "text-sm!",
     "reset-margin",
-    "!text-[var(--el-text-color-regular)]",
+    "text-(--el-text-color-regular)!",
-    "dark:!text-white",
+    "dark:text-white!",
-    "dark:hover:!text-primary"
+    "dark:hover:text-primary!"
   ];
 });
 
@@ -166,7 +166,7 @@ defineExpose({ onTreeReset });
         <template #default="{ node, data }">
           <div
             :class="[
-              'rounded',
+              'rounded-sm',
               'flex',
               'items-center',
               'select-none',
@@ -194,7 +194,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",
+      "text-gray-500!",
-      "dark:!text-white",
+      "dark:text-white!",
-      "dark:hover:!text-primary"
+      "dark:hover:text-primary!"
     ];
   });
   // 重置的新密码

src/views/table/edit/demo3/index.vue

@@ -12,7 +12,7 @@ const { columns, dataList } = useColumns();
       </code>
     </el-scrollbar>
     <pure-table
-      class="!w-[30vw]"
+      class="w-[30vw]!"
       row-key="id"
       border
       :data="dataList"

src/views/table/high/table-select/multiple/index.vue

@@ -25,7 +25,7 @@ const {
   <el-select
     ref="selectRef"
     v-model="selectValue"
-    class="!w-[200px]"
+    class="w-[200px]!"
     placeholder="请选择"
     clearable
     multiple
@@ -41,7 +41,7 @@ const {
           <el-form-item prop="sexValue">
             <el-select
               v-model="searchForm.sexValue"
-              class="!w-[120px]"
+              class="w-[120px]!"
               placeholder="请选择性别"
               :teleported="false"
               clearable
@@ -57,14 +57,14 @@ const {
           <el-form-item prop="searchDate">
             <el-date-picker
               v-model="searchForm.searchDate"
-              class="!w-[150px]"
+              class="w-[150px]!"
               type="date"
               placeholder="请选择日期"
               format="YYYY/MM/DD"
               value-format="YYYY-MM-D"
             />
           </el-form-item>
-          <el-form-item class="float-right !mr-0">
+          <el-form-item class="float-right mr-0!">
             <el-button type="primary" text bg @click="onSearch">
               查询
             </el-button>

src/views/table/high/table-select/radio/index.vue

@@ -17,7 +17,7 @@ const {
   <el-select
     ref="selectRef"
     v-model="selectValue"
-    class="!w-[200px]"
+    class="w-[200px]!"
     placeholder="请选择"
     value-key="id"
     clearable

src/views/tabs/index.vue

@@ -93,7 +93,7 @@ function onCloseTags() {
     <el-divider />
     <el-tree-select
       v-model="currentValues"
-      class="!w-[300px]"
+      class="w-[300px]!"
       node-key="uniqueId"
       placeholder="请选择要关闭的标签"
       clearable

src/views/welcome/index.vue

@@ -80,11 +80,11 @@ const optionsBasis: Array<OptionsType> = [
             </div>
             <ChartLine
               v-if="item.data.length > 1"
-              class="!w-1/2"
+              class="w-1/2!"
               :color="item.color"
               :data="item.data"
             />
-            <ChartRound v-else class="!w-1/2" />
+            <ChartRound v-else class="w-1/2!" />
           </div>
         </el-card>
       </re-col>

tailwind.config.ts

@@ -1,19 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  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)",
-        text_color_primary: "var(--el-text-color-primary)",
-        text_color_regular: "var(--el-text-color-regular)"
-      }
-    }
-  }
-} satisfies Config;