feat: upgrade to TailwindCSS v4 (#11668)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

biome.json

@@ -1,5 +1,10 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "files": {
     "ignoreUnknown": true,
     "includes": [

config/config.ts

@@ -201,8 +201,4 @@ export default defineConfig({
     'process.env.COMMIT_HASH': process.env.COMMIT_HASH || '',
     'process.env.CF_PAGES_COMMIT_SHA': process.env.CF_PAGES_COMMIT_SHA || '',
   },
-  tailwindcss: {
-    // 这里可以配置 tailwindcss 的选项，具体配置项可以参考 tailwindcss 官方文档
-    // https://tailwindcss.com/docs/configuration
-  },
 });

package.json

@@ -78,7 +78,8 @@
     "jest-environment-jsdom": "^30.0.5",
     "lint-staged": "^16.1.2",
     "mockjs": "^1.1.0",
-    "tailwindcss": "^3.3.2",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.2",
     "umi-serve": "^1.9.11"

postcss.config.js

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

src/global.tsx

@@ -1,3 +1,4 @@
+import './tailwind.css';
 import { useIntl } from '@umijs/max';
 import { Button, message, notification } from 'antd';
 import defaultSettings from '../config/defaultSettings';

src/tailwind.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@source "./src";

tailwind.css

@@ -1,14 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  @keyframes shine {
-    100% {
-      left: 125%;
-    }
-  }
-  .animate-shine {
-    animation: shine 0.75s;
-  }
-}