From 673e9989d10a0f766f1fc7fc6eaadd1eea0aa6ca Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 10 Apr 2026 15:07:22 +0800 Subject: [PATCH] fix: fix Tailwind CSS not being applied due to Less import issue (#11662) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: fix Tailwind CSS not being applied due to Less import issue Tailwind CSS v4 was not generating styles because it was imported via Less's @import in global.less. Less could not process the modern CSS syntax (@import "tailwindcss"), causing the PostCSS plugin to never process it. Fixed by importing tailwind.css directly in app.tsx, which allows Vite to process it through PostCSS correctly. Closes #11661 Co-Authored-By: Claude Opus 4.6 * chore: remove font smoothing CSS properties Co-Authored-By: Claude Opus 4.6 * feat: 重新设计 Welcome 页面，使用 Tailwind CSS 实现现代简洁风格 - 采用左侧介绍 + 右侧卡片布局 - 使用 Tailwind 类名替代内联样式 - 卡片增加 hover 效果和圆角 - 支持亮色/暗色主题 Co-Authored-By: Claude Opus 4.6 * chore: configure Tailwind CSS v3 Co-Authored-By: Claude Opus 4.6 * fix: 修复 Welcome 页面主题兼容性问题 - 移除 Tailwind dark: 类，改用 Ant Design token 驱动颜色 - 修复 flex 布局使用 flex-none 替代 flex-1 Co-Authored-By: Claude Opus 4.6 * feat: 重新设计 Welcome 页面 - 渐变标题 + 毛玻璃卡片 - 标题使用渐变色 - 卡片使用毛玻璃效果 (backdrop-blur) - 添加悬停光效动画 - 三列网格布局 Co-Authored-By: Claude Opus 4.6 --------- Co-authored-by: Claude Opus 4.6 --- config/config.ts | 6 +- package.json | 3 +- src/global.less | 2 - src/pages/Welcome.tsx | 176 +++++++++++++++++++----------------------- tailwind.config.js | 3 + tailwind.css | 16 +++- 6 files changed, 100 insertions(+), 106 deletions(-) create mode 100644 tailwind.config.js 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 ( -
+ {/* 悬停时的光效 */}
+ 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' }} + /> + +
{index}
-
- {title} +
+

+ {title} +

+

+ {desc} +

+
- {desc} + 了解更多 + →
- - 了解更多 {'>'} - -
+ ); }; const Welcome: React.FC = () => { const { token } = theme.useToken(); const { initialState } = useModel('@@initialState'); + const isDark = initialState?.settings?.navTheme === 'realDark'; + return ( -
-
- 欢迎使用 Ant Design Pro +
+ {/* 标题区域 */} +
+

+ 欢迎使用 Ant Design Pro +

+

+ Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents + 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 +

-

- Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents - 的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 -

-
+ + {/* 卡片区域 */} +
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; + } +}