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

2025-11-09 13:53:38 +08:00 · 2025-03-16 19:46:35 +08:00
parent b87eb6fd0a
commit ab1c7f8bcc
60 changed files with 517 additions and 521 deletions
--- 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!";
    };
  });