feat: upgrade to Tailwind CSS v4

- Updated tailwindcss from v3.4.17 to v4.1.13
- Migrated from autoprefixer to @tailwindcss/postcss
- Updated PostCSS configuration for v4 compatibility
- Replaced old tailwind.config.js with tailwind.config.ts
- Updated CSS imports to use new @import "tailwindcss" syntax
- Maintained preflight: false configuration for Ant Design compatibility
- Verified build and dev server functionality

Author: sunnylqm

bun.lock

@@ -28,12 +28,12 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",
+    "@tailwindcss/postcss": "^4.1.13",
     "@types/git-url-parse": "^16.0.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-router-dom": "^5.3.3",
-    "autoprefixer": "^10.4.21",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.13",
     "typescript": "^5.9.3"
   },
   "trustedDependencies": [

package.json

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

postcss.config.js

@@ -16,10 +16,10 @@ export default function PlatformIcon({
     return null;
   }
   if (platform === "android") {
-    return <AndroidFilled className={cn("text-[#3ddc84]", className)} />;
+    return <AndroidFilled className={cn("text-[#3ddc84]!", className)} />;
   }
   if (platform === "ios") {
-    return <AppleFilled className={cn("text-[#a6b1b7]", className)} />;
+    return <AppleFilled className={cn("text-[#a6b1b7]!", className)} />;
   }
-  return <HarmonyOSOutlined className={cn("text-[#a6b1b7]", className)} />;
+  return <HarmonyOSOutlined className={cn("text-[#a6b1b7]!", className)} />;
 }

src/components/platform-icon.tsx

@@ -113,7 +113,7 @@ export default function Sider() {
   }
   return (
     <Layout.Sider width={240} theme="light" style={style.sider}>
-      <Layout.Header className="flex justify-center items-center bg-transparent px-0">
+      <Layout.Header className="flex justify-center items-center bg-transparent! px-0!">
         <LogoH />
       </Layout.Header>
       <SiderMenu selectedKeys={selectedKeys} />
@@ -141,7 +141,7 @@ const SiderMenu = ({ selectedKeys }: SiderMenuProps) => {
             </div>
           }
           size="small"
-          className="mr-2 mb-4"
+          className="mr-2! mb-4!"
         >
           <Progress
             status={percent && percent > 40 ? "normal" : "exception"}

src/components/sider.tsx

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html,
 body {

src/index.scss src/index.csssrc/index.scss renamed to src/index.css

@@ -4,7 +4,7 @@ import zhCN from "antd/locale/zh_CN";
 import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 
-import "./index.scss";
+import "./index.css";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { router } from "./router";
 import { queryClient } from "./utils/queryClient";

src/index.tsx

@@ -1,4 +1,4 @@
-import { JavaScriptOutlined } from "@ant-design/icons";
+import { DownOutlined, JavaScriptOutlined } from "@ant-design/icons";
 import { Popover, Dropdown, Button } from "antd";
 import JsonEditor from "./json-editor";
 import { Mode } from "vanilla-jsoneditor";
@@ -34,17 +34,19 @@ export const DepsTable = ({
             {deps ? (
               <div>
                 <div className="flex flex-col items-center justify-center">
-                  <h4>
-                    JavaScript 依赖列表{!diffs && `(${name})`}
-                    <div>
-                      {diffs && (
-                        <>
-                          <span className="font-normal">{diffs.newName}</span>
-                          {` <-> ${name}`}
-                        </>
-                      )}
+                  <div className="h-12">
+                    <div className="font-bold">
+                      JavaScript 依赖列表{!diffs && `(${name})`}
+                      <div>
+                        {diffs && (
+                          <>
+                            <span className="font-normal">{diffs.newName}</span>
+                            {` <-> ${name}`}
+                          </>
+                        )}
+                      </div>
                     </div>
-                    <div className="absolute right-8 top-7">
+                    <div className="absolute right-3 top-3">
                       {diffs ? (
                         <Button
                           className="content-end"
@@ -55,8 +57,7 @@ export const DepsTable = ({
                           返回
                         </Button>
                       ) : (
-                        <Dropdown.Button
-                          className=""
+                        <Dropdown
                           menu={{
                             items: [
                               {
@@ -104,11 +105,14 @@ export const DepsTable = ({
                             },
                           }}
                         >
-                          对比变更
-                        </Dropdown.Button>
+                          <Button>
+                            对比变更
+                            <DownOutlined />
+                          </Button>
+                        </Dropdown>
                       )}
                     </div>
-                  </h4>
+                  </div>
                   <div className="max-h-[50vh] overflow-y-auto">
                     {diffs ? (
                       <DepsDiff
@@ -120,13 +124,10 @@ export const DepsTable = ({
                         content={{
                           json: Object.keys(deps)
                             .sort() // Sort the keys alphabetically
-                            .reduce(
-                              (obj, key) => {
-                                obj[key] = deps[key]; // Rebuild the object with sorted keys
-                                return obj;
-                              },
-                              {} as Record<string, string>
-                            ),
+                            .reduce((obj, key) => {
+                              obj[key] = deps[key]; // Rebuild the object with sorted keys
+                              return obj;
+                            }, {} as Record<string, string>),
                         }}
                         mode={Mode.tree}
                         mainMenuBar={false}

src/pages/manage/components/deps-table.tsx

@@ -51,7 +51,7 @@ const TestQrCode = ({ name, hash }: { name?: string; hash: string }) => {
       className="ant-typography-edit"
       content={
         <div>
-          <div className="text-center my-1 mx-auto">
+          <div className="text-center my-2 mx-auto">
             测试二维码 <br />
             <a
               target="_blank"
@@ -62,15 +62,17 @@ const TestQrCode = ({ name, hash }: { name?: string; hash: string }) => {
               如何使用？
             </a>
           </div>
-          <QRCode value={codeValue} bordered={false} className="my-0 mx-auto" />
-          <div className="text-center my-0 mx-auto">{name}</div>
+          <div className="flex justify-center">
+            <QRCode value={codeValue} bordered={false} />
+          </div>
+          <div className="text-center my-2 mx-auto">{name}</div>
           {/* <div style={{ textAlign: 'center', margin: '0 auto' }}>{hash}</div> */}
           <div>
             <Input.TextArea
               readOnly
               autoSize
               value={codeValue}
-              className="mb-1"
+              className="mb-2!"
             />
             <div className="flex flex-row items-center">
               <Checkbox

src/pages/manage/components/version-table.tsx

@@ -14,7 +14,7 @@ import {
 } from "antd";
 
 import { Link, useParams } from "react-router-dom";
-import "./index.scss";
+import "./manage.css";
 
 import { api } from "@/services/api";
 import { useApp } from "@/utils/hooks";