渐变文字标题、tailwindcss升级

cdTMP/package.json

@@ -36,6 +36,8 @@
         "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
+        "@tailwindcss/postcss": "^4.0.3",
+        "@tailwindcss/vite": "^4.0.3",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.13.1",
         "@types/nprogress": "^0.2.3",
@@ -43,7 +45,6 @@
         "@vitejs/plugin-vue": "^5.2.1",
         "@vitejs/plugin-vue-jsx": "^4.1.1",
         "@vue/babel-plugin-jsx": "^1.2.5",
-        "autoprefixer": "^10.4.20",
         "browserslist": "^4.24.4",
         "eslint": "^9.19.0",
         "eslint-plugin-vue": "^9.32.0",
@@ -52,7 +53,7 @@
         "postcss": "^8.5.1",
         "prettier": "^3.4.2",
         "rollup-plugin-visualizer": "^5.14.0",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.0.3",
         "typescript": "^5.7.3",
         "vite": "^6.0.11"
     }

cdTMP/postcss.config.cjs

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
+        '@tailwindcss/postcss': {},
-        autoprefixer: {}
     }
 }

cdTMP/src/components/ma-crud/components/import.vue

@@ -9,7 +9,7 @@
             <template #upload-button>
                 <div
                     style="background-color: var(--color-fill-2); border: 1px dashed var(--color-fill-4)"
-                    class="rounded text-center p-7"
+                    class="rounded-sm text-center p-7"
                 >
                     <div>
                         <icon-upload class="text-5xl text-gray-400" />

cdTMP/src/components/ma-form/formItem/form-item.vue

@@ -20,7 +20,7 @@
         :hide-label="props.component.hideLabel"
         :content-class="props.component.contentClass"
         :feedback="props.component.feedback"
-        :validate-trigger="props.component.validateTrigger ?? 'blur'"
+        :validate-trigger="props.component.validateTrigger ?? 'blur-sm'"
         :validate-status="props.component.validateStatus"
         :class="[props.component.customClass]"
     >

cdTMP/src/components/ma-form/formItem/form-upload.vue

@@ -14,7 +14,7 @@
                 :title="props.component.title"
                 :disabled="props.component.disabled"
                 :icon="props.component.icon"
-                :rounded="props.component.rounded"
+                :rounded="props.component.rounded-sm"
                 :multiple="props.component.multiple"
                 :draggable="props.component.draggable"
                 :size="props.component.size"

cdTMP/src/components/ma-resource/index.vue

@@ -3,13 +3,13 @@
  - @Link XXX
 -->
 <template>
-    <div class="w-full p-2 resource-container h-full lg:flex lg:justify-between rounded-sm">
+    <div class="w-full p-2 resource-container h-full lg:flex lg:justify-between rounded-xs">
         <a-modal v-model:visible="openNetworkModal" :ok-text="$t('sys.save')" :on-before-ok="saveNetworkImg" draggable>
             <template #title>{{ $t("maResource.saveNetworkImage") }}</template>
             <a-input v-model="networkImg" class="mb-3" :placeholder="$t('maResource.networkImageNotice')" allow-clear />
             <a-image :src="networkImg ?? ''" width="100%" style="min-height: 150px" />
         </a-modal>
-        <div class="lg:w-1/5 w-full p-2 shadow">
+        <div class="lg:w-1/5 w-full p-2 shadow-sm">
             <ma-tree-slider
                 :data="sliderData"
                 :search-placeholder="$t('maResource.searchResource')"
@@ -37,7 +37,7 @@
             <a-spin :loading="resourceLoading" :tip="$t('maResource.loadingText')" class="h-full">
                 <div class="resource-list mt-2" ref="rl" v-if="attachmentList && attachmentList.length > 0">
                     <div
-                        class="item rounded-sm"
+                        class="item rounded-xs"
                         v-for="(item, index) in attachmentList"
                         :key="item.hash"
                         @click="selectFile(item, index)"
@@ -160,7 +160,7 @@ const searchFile = async () => {
 
 const selectFile = (item, index) => {
     const children = rl.value.children
-    const className = "item rounded-sm"
+    const className = "item rounded-xs"
 
     if (!/^(http|https)/g.test(item.url)) {
         item.url = tool.attachUrl(item.url, getStoreMode(item.storage_mode))
@@ -191,7 +191,7 @@ const clearSelecteds = () => {
     if (rl.value && rl.value.children) {
         const children = rl.value.children
         for (let i = 0; i < children.length; i++) {
-            children[i].className = "item rounded-sm"
+            children[i].className = "item rounded-xs"
         }
     }
     if (props.multiple) {

cdTMP/src/components/ma-upload/components/chunk-upload.vue

@@ -13,7 +13,7 @@
             <slot name="customer">
                 <div
                     style="background-color: var(--color-fill-2); border: 1px dashed var(--color-fill-4)"
-                    class="rounded text-center p-7 w-full"
+                    class="rounded-sm text-center p-7 w-full"
                 >
                     <div>
                         <icon-upload class="text-5xl text-gray-400" />

cdTMP/src/components/ma-upload/components/file-upload.vue

@@ -14,7 +14,7 @@
                 <slot name="customer">
                     <div
                         style="background-color: var(--color-fill-2); border: 1px dashed var(--color-fill-4)"
-                        class="rounded text-center p-7 w-full"
+                        class="rounded-sm text-center p-7 w-full"
                     >
                         <div>
                             <icon-upload class="text-5xl text-gray-400" />

cdTMP/src/components/ma-upload/components/image-upload.vue

@@ -46,7 +46,7 @@
                 <template #upload-button>
                     <slot name="customer">
                         <div
-                            :class="'upload-skin ' + (config.rounded ? 'rounded-full' : 'rounded-sm')"
+                            :class="'upload-skin ' + (config.rounded ? 'rounded-full' : 'rounded-xs')"
                             v-if="!props.modelValue || config.multiple"
                         >
                             <div class="icon text-3xl">

cdTMP/src/layout/components/navbar.vue

@@ -10,8 +10,12 @@
                     @click="handleClickLogo"
                     :style="{ margin: 0, fontSize: '18px' }"
                     :heading="5"
+                >
+                    <div
+                        class="font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600"
                     >
                         测试管理平台
+                    </div>
                 </a-typography-title>
                 <a-typography-title :heading="6" class="version">V0.0.4</a-typography-title>
                 <icon-menu-fold
@@ -23,8 +27,14 @@
         </div>
         <div class="center-side flex items-center justify-center font-bold text-lg">
             <template v-if="title">
-                <a-typography-title :style="{ margin: 0, fontSize: '1.1rem', fontWeight: 'bold' }" :heading="4">
+                <a-typography-title
-                    项目名称：{{ $route.query.ident }}-{{ title }}
+                    :style="{ margin: 0, fontSize: '1.1rem', fontWeight: 'bold' }"
+                    :heading="4"
+                    :ellipsis="{
+                        rows: 2
+                    }"
+                >
+                    <div>项目名称：{{ $route.query.ident }}-{{ title }}</div>
                 </a-typography-title>
             </template>
             <Menu v-if="topMenu"></Menu>

cdTMP/src/layout/project-layout.vue

@@ -7,18 +7,20 @@
             <a-layout class="layout layout-demo">
                 <a-layout-sider class="layout-sider">
                     <div class="p-2 overflow-auto myhcalc">
-                        <a-input-group class="mb-2 w-full flex items-center h-1/12" size="mini">
+                        <a-input-group class="mb-2 w-full flex items-center" size="mini">
                             <a-input style="height: 32px" v-model="searchKey" allow-clear></a-input>
                             <a-button @click="handleSearchTreeDataClick">搜索</a-button>
                         </a-input-group>
-                        <a-button type="primary" @click="toggleExpanded" class="mb-1">
+                        <div class="flex justify-between mb-2">
+                            <a-button type="primary" @click="toggleExpanded" class="w-5/12">
                                 {{ expandedKeys?.length ? "全部收缩" : "全部展开" }}
                             </a-button>
                             <a-popconfirm type="warning" @ok="handleCopyNode" content="是否确定根据选中节点进行创建？">
-                            <a-button type="outline" status="warning" class="ml-1">
+                                <a-button type="outline" status="warning">
                                     <template #icon> <icon-plus /></template>点击复制创建轮次
                                 </a-button>
                             </a-popconfirm>
+                        </div>
                         <a-tree
                             class="h-10/12 select-none my-arco-wrap-class"
                             :data="treeData"

cdTMP/src/style/index.css

@@ -1,3 +1,22 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+
-@tailwind utilities;
+@config '../../tailwind.config.js';
+
+/*
+  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);
+  }
+}

cdTMP/src/views/dashboard/usercenter/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="block">
-        <div class="user-header rounded-sm text-center">
+        <div class="user-header rounded-xs text-center">
             <div class="pt-6 mx-auto avatar-box top-box">
                 {{ userStore.name }}
             </div>
@@ -8,9 +8,9 @@
                 <a-tag size="large" class="mt-3 rounded-full" color="#de53ff"> 账号：{{ userStore.username }} </a-tag>
             </div>
         </div>
-        <a-layout-content class="block lg:flex lg:justify-between">
+        <div class="block lg:flex lg:justify-between">
             <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4">
-                <a-tabs type="rounded">
+                <a-tabs default-active-key="info" :animation="true">
                     <a-tab-pane key="info" title="个人资料">
                         <user-infomation />
                     </a-tab-pane>
@@ -20,7 +20,7 @@
                 </a-tabs>
             </div>
             <div class="ma-content-block w-full lg:w-6/12 mt-3 p-4 ml-0 lg:ml-3">
-                <a-tabs type="rounded">
+                <a-tabs default-active-key="login-log" :animation="true">
                     <a-tab-pane key="login-log" title="登录日志" v-loading="isDataLoading">
                         <a-timeline class="pl-5 mt-3" v-if="loginLogList.length">
                             <a-timeline-item
@@ -48,7 +48,7 @@
                     </a-tab-pane>
                 </a-tabs>
             </div>
-        </a-layout-content>
+        </div>
     </div>
 </template>
 

cdTMP/src/views/dashboard/workplace/components/cpns/st-announced.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full lg:w-9/12 ma-content-block rounded-sm p-3 mt-3 bg-color">
+    <div class="w-full lg:w-9/12 ma-content-block rounded-xs p-3 mt-3 bg-color">
         <div class="flex justify-between">
             系统公告
             <a-link>更多</a-link>

cdTMP/src/views/dashboard/workplace/components/cpns/st-cdtestmanage-info.vue

@@ -1,23 +1,23 @@
 <template>
-    <div class="w-full lg:w-3/12 ma-content-block rounded-sm ml-0 lg:ml-3 p-3 mt-3">
+    <div class="w-full lg:w-3/12 ma-content-block rounded-xs ml-0 lg:ml-3 p-3 mt-3">
         <div class="flex">测试管理平台相关</div>
         <div class="block lg:grid lg:grid-cols-2 lg:gap-2 mt-3">
-            <a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
+            <a-card type="rounded-xs text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
                 <a target="_blank" href="https://github.com/ks3356143/cdTestPlant3">
                     <a-button type="outline" class="w-full">前端仓库</a-button>
                 </a>
             </a-card>
-            <a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
+            <a-card type="rounded-xs text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
                 <a href="https://github.com/ks3356143/cdtestplant_v1" target="_blank">
                     <a-button type="outline" class="w-full">后端仓库</a-button>
                 </a>
             </a-card>
-            <a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
+            <a-card type="rounded-xs text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
                 <a href="https://arco.design/vue/docs/pro/start" target="_blank">
                     <a-button type="outline" class="w-full">感谢ArcoDesign</a-button>
                 </a>
             </a-card>
-            <a-card type="rounded-sm text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
+            <a-card type="rounded-xs text-center" class="w-full" :body-style="{ padding: 0 }" :bordered="false">
                 <a href="https://doc.mineadmin.com/" target="_blank">
                     <a-button type="outline" class="w-full">感谢MineAdmin</a-button>
                 </a>

cdTMP/src/views/dashboard/workplace/components/cpns/st-count.vue

@@ -3,7 +3,7 @@
         <div class="lg:grid lg:grid-cols-4 lg:gap-1">
             <a-card
                 style="height: 65px"
-                class="rounded-sm mt-3"
+                class="rounded-xs mt-3"
                 :body-style="{ padding: 0, height: '65px' }"
                 :bordered="false"
                 hoverable
@@ -23,7 +23,7 @@
             </a-card>
             <a-card
                 style="height: 65px"
-                class="rounded-sm mt-3 lg:ml-2"
+                class="rounded-xs mt-3 lg:ml-2"
                 :body-style="{ padding: 0, height: '65px' }"
                 :bordered="false"
                 hoverable
@@ -43,7 +43,7 @@
             </a-card>
             <a-card
                 style="height: 65px"
-                class="rounded-sm mt-3 lg:ml-2"
+                class="rounded-xs mt-3 lg:ml-2"
                 :body-style="{ padding: 0, height: '65px' }"
                 :bordered="false"
                 hoverable
@@ -63,7 +63,7 @@
             </a-card>
             <a-card
                 style="height: 65px"
-                class="rounded-sm mt-3 lg:ml-2"
+                class="rounded-xs mt-3 lg:ml-2"
                 :body-style="{ padding: 0, height: '65px' }"
                 :bordered="false"
                 hoverable

cdTMP/src/views/dashboard/workplace/components/cpns/st-welcome.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex justify-between">
-        <div class="ma-content-block rounded-sm flex justify-between w-full p-3 bg-color">
+        <div class="ma-content-block rounded-xs flex justify-between w-full p-3 bg-color">
             <div class="pl-0 flex">
                 <a-avatar :size="75" class="hidden lg:inline-block">
                     <img src="@/assets/avatar/zhu.jpg" />

cdTMP/src/views/login.vue

@@ -8,7 +8,7 @@
                     <img src="@/assets/img/wxwx-logo.svg" width="45" /><span>{{ $title }}</span>
                 </div>
                 <div class="slogan flex justify-end">
-                    <span>---- 为测评服务，打造测评高地</span>
+                    <span class="font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600">---- 为测评服务，打造测评高地</span>
                 </div>
             </div>
 
@@ -193,6 +193,7 @@ const handleSubmit = async ({ values, errors }) => {
 
     .logo {
         display: flex;
+        align-items: center;
         margin-top: 20px;
         color: #333;
         perspective: 100px;

cdTMP/src/views/project/case/components/ProblemChoose.vue

@@ -263,7 +263,7 @@ const columns = ref([
         search: true,
         dataIndex: "name",
         commonRules: [{ required: true, message: "名称是必填" }],
-        validateTrigger: "blur"
+        validateTrigger: "blur-sm"
     },
     {
         title: "问题标识",
@@ -275,7 +275,7 @@ const columns = ref([
         editDisabled: true,
         addDisabled: true,
         addDefaultValue: `${route.query.ident}`,
-        validateTrigger: "blur"
+        validateTrigger: "blur-sm"
     },
     {
         title: "缺陷状态",

cdTMP/src/views/project/case/index.vue

@@ -226,7 +226,7 @@ const crudColumns = ref([
         search: true,
         dataIndex: "name",
         commonRules: [{ required: true, message: "名称是必填" }],
-        validateTrigger: "blur"
+        validateTrigger: "blur-sm"
     },
     {
         title: "问题标识",
@@ -238,7 +238,7 @@ const crudColumns = ref([
         editDisabled: true,
         addDisabled: true,
         addDefaultValue: `${route.query.ident}`,
-        validateTrigger: "blur"
+        validateTrigger: "blur-sm"
     },
     {
         title: "缺陷状态",

cdTMP/src/views/project/design-demand/hooks/useColumns.ts

@@ -17,7 +17,7 @@ export default function (crudOrFormRef: any) {
             sortable: { sortDirections: ["ascend"] },
             align: "center",
             search: true,
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             placeholder: "请填写测试项的标识，注意标识不能重复",
             commonRules: [{ required: true, message: "测试项标识必填" }],
             openPrepend: true
@@ -29,7 +29,7 @@ export default function (crudOrFormRef: any) {
             align: "center",
             search: true,
             commonRules: [{ required: true, message: "名称是必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "优先级",

cdTMP/src/views/project/dut/hooks/useColumns.ts

@@ -9,7 +9,7 @@ export default function (crudOrFormRef: any) {
             hide: true,
             dataIndex: "id",
             commonRules: [{ required: true, message: "ID必填" }],
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             display: false
         },
         {
@@ -19,7 +19,7 @@ export default function (crudOrFormRef: any) {
             width: 180,
             dataIndex: "ident",
             search: true,
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             placeholder: "请输入文档中设计需求的标识",
             help: '若不知道则填"无"或不填',
             openPrepend: true
@@ -31,7 +31,7 @@ export default function (crudOrFormRef: any) {
             dataIndex: "name",
             search: true,
             commonRules: [{ required: true, message: "设计需求名称是必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "章节号",
@@ -51,7 +51,7 @@ export default function (crudOrFormRef: any) {
             search: true,
             dict: { name: "demandType", props: { label: "title", value: "key" }, translation: true },
             commonRules: [{ required: true, message: "需求类型是必填" }],
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             // 主要为了添加“接口”的4个字段
             onControl: (value) => {
                 if (value === "3") {

cdTMP/src/views/project/round/hooks/useColumn.ts

@@ -21,7 +21,7 @@ export default function (crudOrFormRef: any) {
             hide: true,
             dataIndex: "id",
             commonRules: [{ required: true, message: "ID是必填" }],
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             display: false
         },
         {
@@ -35,7 +35,7 @@ export default function (crudOrFormRef: any) {
             addDefaultValue: route.query.ident + "-R" + (parseInt(route.query.key as any) + 1) + "-UT",
             addDisabled: true,
             editDisabled: true,
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             disabled: true,
             placeholder: "被测件标识未空，请检查"
         },
@@ -85,7 +85,7 @@ export default function (crudOrFormRef: any) {
             dataIndex: "name",
             search: true,
             commonRules: [{ required: true, message: "被测件名称必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "版本",
@@ -93,7 +93,7 @@ export default function (crudOrFormRef: any) {
             dataIndex: "version",
             search: true,
             commonRules: [{ required: true, message: "版本必填" }],
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             help: "填写不带V字符",
             openPrepend: true
         },
@@ -103,7 +103,7 @@ export default function (crudOrFormRef: any) {
             dataIndex: "ref",
             search: true,
             commonRules: [{ required: true, message: "用户标识必填" }],
-            validateTrigger: "blur",
+            validateTrigger: "blur-sm",
             help: "客户使用的标识"
         },
         {

cdTMP/src/views/project/testDemand/hooks/useColumn.tsx

@@ -25,7 +25,7 @@ export default function (crudOrFormRef: any, problemFormRef?: any) {
             editDefaultValue: "用例标识自动生成，结构为YL_IO_XXXX_001",
             editDisabled: true,
             search: true,
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "名称",
@@ -33,7 +33,7 @@ export default function (crudOrFormRef: any, problemFormRef?: any) {
             align: "center",
             search: true,
             commonRules: [{ required: true, message: "名称是必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "是否通过",

cdTMP/src/views/testmanage/projBoard/cpns/RoundInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="round-info-container">
-        <div class="ma-content-block rounded-sm flex-column justify-between w-full p-3 bg-color">
+        <div class="ma-content-block rounded-xs flex-column justify-between w-full p-3 bg-color">
             <div class="title">{{ props.data.name }}信息</div>
             <div class="info-list">
                 <a-list :gridProps="{ gutter: 0, span: 6 }" class="list-container">

cdTMP/src/views/testmanage/projBoard/cpns/TimeLine.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="time-line-container">
-        <div class="ma-content-block rounded-sm flex-column justify-between w-full p-3 bg-color">
+        <div class="ma-content-block rounded-xs flex-column justify-between w-full p-3 bg-color">
             <div class="title">填写的项目时间轴</div>
             <a-timeline direction="horizontal" class="timeline" mode="alternate">
                 <a-timeline-item :label="pInfo.time_line.start_time">

cdTMP/src/views/testmanage/projBoard/cpns/Title.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="title-container">
-        <div class="ma-content-block rounded-sm flex-col justify-between w-full p-3 bg-color">
+        <div class="ma-content-block rounded-xs flex-col justify-between w-full p-3 bg-color">
             <page-header :data="headerData"></page-header>
             <div class="title">基本信息</div>
             <div class="item-container">

cdTMP/src/views/testmanage/projFragment/hooks/crudOption.ts

@@ -51,7 +51,7 @@ const useCrudOption = () => {
             hide: true,
             dataIndex: "id",
             commonRules: [{ required: true, message: "ID必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "片段名称",
@@ -60,7 +60,7 @@ const useCrudOption = () => {
             dataIndex: "name",
             search: true,
             commonRules: [{ required: true, message: "片段名称必填" }],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "替换片段",

cdTMP/src/views/testmanage/projmanage/hooks/useCrudInit.ts

@@ -159,7 +159,7 @@ const useCrudInit = function () {
                 { validator: validateBlank, message: "标识格式不正确" },
                 { validator: validateWindowFileNameInput }
             ],
-            validateTrigger: "blur"
+            validateTrigger: "blur-sm"
         },
         {
             title: "项目名称",

cdTMP/vite.config.js

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue"
 import { resolve } from "path"
 import vueJsx from "@vitejs/plugin-vue-jsx"
 import { visualizer } from "rollup-plugin-visualizer"
+import tailwindcss from "@tailwindcss/vite"
 
 export default ({ mode }) => {
     const env = loadEnv(mode, process.cwd())
@@ -16,7 +17,8 @@ export default ({ mode }) => {
             visualizer({
                 open: true,
                 filename: "visualizer.html" // 分析图生成的文件名
-            })
+            }),
+            tailwindcss()
         ],
         resolve: {
             alias: {