chore: tailwind CSS setup (#11576)

* chore: tailwind CSS setup

* test: update login button snapshot to include loading state

biome.json

@@ -27,7 +27,8 @@
     "rules": {
       "recommended": true,
       "suspicious": {
-        "noExplicitAny": "off"
+        "noExplicitAny": "off",
+        "noUnknownAtRules": "off"
       },
       "correctness": {
         "useExhaustiveDependencies": "off",

config/config.ts

@@ -144,6 +144,7 @@ export default defineConfig({
     // 解决首次加载时白屏的问题
     { src: join(PUBLIC_PATH, 'scripts/loading.js'), async: true },
   ],
+
   //================ pro 插件配置 =================
   presets: ['umi-presets-pro'],
   /**
@@ -166,6 +167,7 @@ export default defineConfig({
       projectName: 'swagger',
     },
   ],
+
   mock: {
     include: ['mock/**/*', 'src/pages/**/_mock.ts'],
   },
@@ -181,4 +183,5 @@ export default defineConfig({
   define: {
     'process.env.CI': process.env.CI,
   },
+  tailwindcss: {},
 });

package.json

@@ -77,7 +77,8 @@
     "umi-presets-pro": "^2.0.3",
     "umi-serve": "^1.9.11",
     "@biomejs/biome": "^2.0.6",
-    "@types/node": "^24.0.10"
+    "@types/node": "^24.0.10",
+    "tailwindcss": "^3"
   },
   "engines": {
     "node": ">=20.0.0"

src/pages/user/login/__snapshots__/login.test.tsx.snap

@@ -382,10 +382,33 @@ exports[`Login Page should login success 1`] = `
                 </a>
               </div>
               <button
-                class="ant-btn css-var-_r_7_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg"
+                class="ant-btn css-var-_r_7_ ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-lg ant-btn-loading"
                 style="width: 100%;"
                 type="button"
               >
+                <span
+                  class="ant-btn-icon ant-btn-loading-icon"
+                >
+                  <span
+                    aria-label="loading"
+                    class="anticon anticon-loading anticon-spin"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="loading"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="0 0 1024 1024"
+                      width="1em"
+                    >
+                      <path
+                        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                      />
+                    </svg>
+                  </span>
+                </span>
                 <span>
                   Login
                 </span>

tailwind.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  content: ['./src/**/*.tsx'],
+};

tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;