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

2025-06-06 16:37:18 +08:00 · 2025-03-16 19:46:35 +08:00 · 2025-03-16 19:46:35 +08:00 · ab1c7f8bcc
commit ab1c7f8bcc
parent b87eb6fd0a
60 changed files with 517 additions and 521 deletions
--- a/build/plugins.ts
+++ b/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(),
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/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: {} } : {})
  }
 };
--- a/src/components/ReCropper/src/index.tsx
+++ b/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)]"
--- a/src/components/ReDialog/index.vue
+++ b/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]!"
  ];
 });

--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/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-grab"
+                                    ? "cursor-no-drop!"
+                                    : "cursor-grab!"
                                ]}
                                onMouseenter={(event: {
                                  preventDefault: () => void;
--- a/src/components/ReVxeTableBar/src/bar.tsx
+++ b/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-grab"
+                                    ? "cursor-no-drop!"
+                                    : "cursor-grab!"
                                ]}
                                onMouseenter={(event: {
                                  preventDefault: () => void;
--- a/src/layout/components/lay-navbar/index.vue
+++ b/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">
--- a/src/layout/components/lay-panel/index.vue
+++ b/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",
--- a/src/layout/components/lay-setting/index.vue
+++ b/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
--- a/src/layout/components/lay-sidebar/NavHorizontal.vue
+++ b/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">
--- a/src/layout/components/lay-sidebar/NavMix.vue
+++ b/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">
--- a/src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
+++ b/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) }}
--- a/src/layout/components/lay-sidebar/components/SidebarItem.vue
+++ b/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,
-          '!text-inherit': true,
-          '!pl-4':
+          'w-full!': true,
+          'text-inherit!': true,
+          'pl-4!':
            layout !== 'horizontal' &&
            isCollapse &&
            !toRaw(item.meta.icon) &&
--- a/src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
+++ b/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>
--- a/src/layout/components/lay-tag/index.vue
+++ b/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>
--- a/src/layout/hooks/useNav.ts
+++ b/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!";
    };
  });

--- a/src/style/tailwind.css
+++ b/src/style/tailwind.css
@ -1,21 +1,44 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

-@layer components {
-  .flex-c {
+@custom-variant dark (&:is(.dark *));
+
+@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 {
-    @apply dark:text-white dark:hover:!bg-[#242424];
-  }
+@utility navbar-bg-hover {
+  @apply dark:text-white dark:hover:bg-[#242424]!;
 }
--- a/src/views/able/directives.vue
+++ b/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>
      文本复制指令（自定义触发事件，单击复制）
--- a/src/views/able/print/index.vue
+++ b/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"
        >
--- a/src/views/able/watermark.vue
+++ b/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>
--- a/src/views/able/wavesurfer/index.vue
+++ b/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" />
--- a/src/views/about/columns.tsx
+++ b/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>
        );
--- a/src/views/account-settings/index.vue
+++ b/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>
--- a/src/views/components/animatecss.vue
+++ b/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>
--- a/src/views/components/check-button.vue
+++ b/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'"
    />
--- a/src/views/components/date-picker.vue
+++ b/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"
--- a/src/views/components/datetime-picker.vue
+++ b/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"
--- a/src/views/components/dialog/form.vue
+++ b/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="上海" />
--- a/src/views/components/dialog/formPrimitive.vue
+++ b/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>
--- a/src/views/components/drawer/form.vue
+++ b/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="上海" />
--- a/src/views/components/drawer/formPrimitive.vue
+++ b/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>
--- a/src/views/components/tag.vue
+++ b/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"
--- a/src/views/components/time-picker.vue
+++ b/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"
--- a/src/views/components/upload/form.vue
+++ b/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"
      />
--- a/src/views/components/upload/index.vue
+++ b/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
--- a/src/views/components/virtual-list/horizontal.vue
+++ b/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"
--- a/src/views/components/virtual-list/vertical.vue
+++ b/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..."
      />
--- a/src/views/login/index.vue
+++ b/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 }"
              />
--- a/src/views/monitor/logs/login/index.vue
+++ b/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" />
--- a/src/views/monitor/logs/operation/index.vue
+++ b/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" />
--- a/src/views/monitor/logs/system/index.vue
+++ b/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"
--- a/src/views/monitor/online/index.vue
+++ b/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>
--- a/src/views/permission/page/index.vue
+++ b/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"
--- a/src/views/system/dept/form.vue
+++ b/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"
--- a/src/views/system/dept/index.vue
+++ b/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" />
--- a/src/views/system/menu/form.vue
+++ b/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"
--- a/src/views/system/menu/index.vue
+++ b/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>
--- a/src/views/system/role/index.vue
+++ b/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">
--- a/src/views/system/role/utils/hook.tsx
+++ b/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!"
  //   ];
  // });

--- a/src/views/system/user/index.vue
+++ b/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" />
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@ -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!"
  ];
 });

@ -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>
--- a/src/views/system/user/utils/hook.tsx
+++ b/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!"
    ];
  });
  // 重置的新密码
--- a/src/views/table/edit/demo3/index.vue
+++ b/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"
--- a/src/views/table/high/table-select/multiple/index.vue
+++ b/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>
--- a/src/views/table/high/table-select/radio/index.vue
+++ b/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
--- a/src/views/tabs/index.vue
+++ b/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
--- a/src/views/welcome/index.vue
+++ b/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>
--- a/tailwind.config.ts
+++ b/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;