diff --git a/config/config.ts b/config/config.ts
index d023093f..619dbf50 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -1,7 +1,6 @@
 // https://umijs.org/config/
 
 import { join } from 'node:path';
-import tailwindcss from '@tailwindcss/postcss';
 import { defineConfig } from '@umijs/max';
 import defaultSettings from './defaultSettings';
 import proxy from './proxy';
@@ -202,5 +201,8 @@ export default defineConfig({
     'process.env.COMMIT_HASH': process.env.COMMIT_HASH || '',
     'process.env.CF_PAGES_COMMIT_SHA': process.env.CF_PAGES_COMMIT_SHA || '',
   },
-  extraPostCSSPlugins: [tailwindcss],
+  tailwindcss: {
+    // 这里可以配置 tailwindcss 的选项，具体配置项可以参考 tailwindcss 官方文档
+    // https://tailwindcss.com/docs/configuration
+  },
 });
diff --git a/package.json b/package.json
index 66e75947..cd73a9e3 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "@biomejs/biome": "^2.1.1",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@tailwindcss/postcss": "^4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/express": "^5.0.6",
@@ -79,7 +78,7 @@
     "jest-environment-jsdom": "^30.0.5",
     "lint-staged": "^16.1.2",
     "mockjs": "^1.1.0",
-    "tailwindcss": "^4",
+    "tailwindcss": "^3.3.2",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.2",
     "umi-serve": "^1.9.11"
diff --git a/src/global.less b/src/global.less
index 799214cf..0bfe7bff 100644
--- a/src/global.less
+++ b/src/global.less
@@ -1,5 +1,3 @@
-@import '../tailwind.css';
-
 @font-face {
   font-family: "AlibabaSans";
   font-style: normal;
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 5216d7fd..7b77a531 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -3,158 +3,138 @@ import { useModel } from '@umijs/max';
 import { Card, theme } from 'antd';
 import React from 'react';
 
-/**
- * 每个单独的卡片，为了复用样式抽成了组件
- * @param param0
- * @returns
- */
 const InfoCard: React.FC<{
   title: string;
   index: number;
   desc: string;
   href: string;
-}> = ({ title, href, index, desc }) => {
-  const { useToken } = theme;
-
-  const { token } = useToken();
+  isDark?: boolean;
+}> = ({ title, href, index, desc, isDark }) => {
+  const { token } = theme.useToken();
 
   return (
-    <div
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className="group relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:scale-[1.02]"
       style={{
-        backgroundColor: token.colorBgContainer,
-        boxShadow: token.boxShadow,
-        borderRadius: '8px',
-        fontSize: '14px',
-        color: token.colorTextSecondary,
-        lineHeight: '22px',
-        padding: '16px 19px',
-        minWidth: '220px',
-        flex: 1,
+        background: isDark
+          ? 'rgba(255, 255, 255, 0.05)'
+          : 'rgba(255, 255, 255, 0.7)',
+        backdropFilter: 'blur(20px)',
+        border: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.5)'}`,
+        boxShadow: isDark
+          ? '0 4px 24px rgba(0,0,0,0.3)'
+          : '0 4px 24px rgba(0,0,0,0.06)',
       }}
     >
+      {/* 悬停时的光效 */}
       <div
-        style={{
-          display: 'flex',
-          gap: '4px',
-          alignItems: 'center',
-        }}
-      >
+        className="absolute -inset-full top-0 block h-full w-1/2 -skew-x-12 bg-gradient-to-r from-transparent to-white opacity-0 transition-all duration-500 group-hover:animate-shine group-hover:opacity-10"
+        style={{ display: isDark ? 'none' : 'block' }}
+      />
+
+      <div className="relative flex items-start gap-4">
         <div
+          className="shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-white text-xl font-bold"
           style={{
-            width: 48,
-            height: 48,
-            lineHeight: '22px',
-            backgroundSize: '100%',
-            textAlign: 'center',
-            padding: '8px 16px 16px 12px',
-            color: '#FFF',
-            fontWeight: 'bold',
-            backgroundImage:
-              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
+            background: `linear-gradient(135deg, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 100%)`,
+            boxShadow: `0 8px 20px ${token.colorPrimary}40`,
           }}
         >
           {index}
         </div>
-        <div
-          style={{
-            fontSize: '16px',
-            color: token.colorText,
-            paddingBottom: 8,
-          }}
-        >
-          {title}
+        <div className="flex-1 min-w-0">
+          <h3
+            className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors"
+            style={{ color: token.colorText }}
+          >
+            {title}
+          </h3>
+          <p
+            className="text-sm leading-relaxed line-clamp-2"
+            style={{ color: token.colorTextSecondary }}
+          >
+            {desc}
+          </p>
         </div>
       </div>
+
       <div
-        style={{
-          fontSize: '14px',
-          color: token.colorTextSecondary,
-          textAlign: 'justify',
-          lineHeight: '22px',
-          marginBottom: 8,
-        }}
+        className="mt-4 text-sm font-medium flex items-center gap-1 transition-colors group-hover:gap-2"
+        style={{ color: token.colorPrimary }}
       >
-        {desc}
+        了解更多
+        <span className="transition-transform">→</span>
       </div>
-      <a href={href} target="_blank" rel="noreferrer">
-        了解更多 {'>'}
-      </a>
-    </div>
+    </a>
   );
 };
 
 const Welcome: React.FC = () => {
   const { token } = theme.useToken();
   const { initialState } = useModel('@@initialState');
+  const isDark = initialState?.settings?.navTheme === 'realDark';
+
   return (
     <PageContainer>
       <Card
-        style={{
-          borderRadius: 8,
-        }}
+        className="rounded-2xl overflow-hidden"
         styles={{
           body: {
-            backgroundImage:
-              initialState?.settings?.navTheme === 'realDark'
-                ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
-                : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
+            background: isDark
+              ? 'linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%)'
+              : 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
+            padding: '48px 0',
           },
         }}
       >
-        <div
-          style={{
-            backgroundPosition: '100% -30%',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: '274px auto',
-            backgroundImage:
-              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
-          }}
-        >
-          <div
-            style={{
-              fontSize: '20px',
-              color: token.colorTextHeading,
-            }}
-          >
-            欢迎使用 Ant Design Pro
+        <div className="max-w-6xl mx-auto px-6">
+          {/* 标题区域 */}
+          <div className="text-center mb-16">
+            <h1
+              className="text-5xl font-bold mb-6"
+              style={{
+                background: `linear-gradient(135deg, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 100%)`,
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                backgroundClip: 'text',
+              }}
+            >
+              欢迎使用 Ant Design Pro
+            </h1>
+            <p
+              className="text-lg max-w-2xl mx-auto leading-relaxed"
+              style={{ color: token.colorTextSecondary }}
+            >
+              Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
+              的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
+            </p>
           </div>
-          <p
-            style={{
-              fontSize: '14px',
-              color: token.colorTextSecondary,
-              lineHeight: '22px',
-              marginTop: 16,
-              marginBottom: 32,
-              width: '65%',
-            }}
-          >
-            Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
-            的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
-          </p>
-          <div
-            style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: 16,
-            }}
-          >
+
+          {/* 卡片区域 */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <InfoCard
               index={1}
               href="https://umijs.org/docs/introduce/introduce"
               title="了解 umi"
               desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
+              isDark={isDark}
             />
             <InfoCard
               index={2}
               title="了解 ant design"
               href="https://ant.design"
               desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
+              isDark={isDark}
             />
             <InfoCard
               index={3}
               title="了解 Pro Components"
               href="https://procomponents.ant.design"
               desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
+              isDark={isDark}
             />
           </div>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..a403104a
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  content: ['./src/**/*.tsx'],
+};
diff --git a/tailwind.css b/tailwind.css
index aedcdfef..8776ebe5 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -1,2 +1,14 @@
-@import "tailwindcss";
-@source "./src/**/*.tsx";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  @keyframes shine {
+    100% {
+      left: 125%;
+    }
+  }
+  .animate-shine {
+    animation: shine 0.75s;
+  }
+}