Skip to content

Commit d5cdacf

Browse files
committed
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
1 parent f834f06 commit d5cdacf

File tree

13 files changed

+227
-436
lines changed

13 files changed

+227
-436
lines changed

bun.lock

Lines changed: 183 additions & 382 deletions
Large diffs are not rendered by default.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@
2828
},
2929
"devDependencies": {
3030
"@biomejs/biome": "2.2.4",
31+
"@tailwindcss/postcss": "^4.1.13",
3132
"@types/git-url-parse": "^16.0.2",
3233
"@types/react": "^19",
3334
"@types/react-dom": "^19",
3435
"@types/react-router-dom": "^5.3.3",
35-
"autoprefixer": "^10.4.21",
36-
"tailwindcss": "^3.4.17",
36+
"tailwindcss": "^4.1.13",
3737
"typescript": "^5.9.3"
3838
},
3939
"trustedDependencies": [

postcss.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

src/components/platform-icon.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default function PlatformIcon({
1616
return null;
1717
}
1818
if (platform === "android") {
19-
return <AndroidFilled className={cn("text-[#3ddc84]", className)} />;
19+
return <AndroidFilled className={cn("text-[#3ddc84]!", className)} />;
2020
}
2121
if (platform === "ios") {
22-
return <AppleFilled className={cn("text-[#a6b1b7]", className)} />;
22+
return <AppleFilled className={cn("text-[#a6b1b7]!", className)} />;
2323
}
24-
return <HarmonyOSOutlined className={cn("text-[#a6b1b7]", className)} />;
24+
return <HarmonyOSOutlined className={cn("text-[#a6b1b7]!", className)} />;
2525
}

src/components/sider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export default function Sider() {
113113
}
114114
return (
115115
<Layout.Sider width={240} theme="light" style={style.sider}>
116-
<Layout.Header className="flex justify-center items-center bg-transparent px-0">
116+
<Layout.Header className="flex justify-center items-center bg-transparent! px-0!">
117117
<LogoH />
118118
</Layout.Header>
119119
<SiderMenu selectedKeys={selectedKeys} />
@@ -141,7 +141,7 @@ const SiderMenu = ({ selectedKeys }: SiderMenuProps) => {
141141
</div>
142142
}
143143
size="small"
144-
className="mr-2 mb-4"
144+
className="mr-2! mb-4!"
145145
>
146146
<Progress
147147
status={percent && percent > 40 ? "normal" : "exception"}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import "tailwindcss";
42

53
html,
64
body {

src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import zhCN from "antd/locale/zh_CN";
44
import { createRoot } from "react-dom/client";
55
import { RouterProvider } from "react-router-dom";
66

7-
import "./index.scss";
7+
import "./index.css";
88
import { QueryClientProvider } from "@tanstack/react-query";
99
import { router } from "./router";
1010
import { queryClient } from "./utils/queryClient";

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

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { JavaScriptOutlined } from "@ant-design/icons";
1+
import { DownOutlined, JavaScriptOutlined } from "@ant-design/icons";
22
import { Popover, Dropdown, Button } from "antd";
33
import JsonEditor from "./json-editor";
44
import { Mode } from "vanilla-jsoneditor";
@@ -34,17 +34,19 @@ export const DepsTable = ({
3434
{deps ? (
3535
<div>
3636
<div className="flex flex-col items-center justify-center">
37-
<h4>
38-
JavaScript 依赖列表{!diffs && `(${name})`}
39-
<div>
40-
{diffs && (
41-
<>
42-
<span className="font-normal">{diffs.newName}</span>
43-
{` <-> ${name}`}
44-
</>
45-
)}
37+
<div className="h-12">
38+
<div className="font-bold">
39+
JavaScript 依赖列表{!diffs && `(${name})`}
40+
<div>
41+
{diffs && (
42+
<>
43+
<span className="font-normal">{diffs.newName}</span>
44+
{` <-> ${name}`}
45+
</>
46+
)}
47+
</div>
4648
</div>
47-
<div className="absolute right-8 top-7">
49+
<div className="absolute right-3 top-3">
4850
{diffs ? (
4951
<Button
5052
className="content-end"
@@ -55,8 +57,7 @@ export const DepsTable = ({
5557
返回
5658
</Button>
5759
) : (
58-
<Dropdown.Button
59-
className=""
60+
<Dropdown
6061
menu={{
6162
items: [
6263
{
@@ -104,11 +105,14 @@ export const DepsTable = ({
104105
},
105106
}}
106107
>
107-
对比变更
108-
</Dropdown.Button>
108+
<Button>
109+
对比变更
110+
<DownOutlined />
111+
</Button>
112+
</Dropdown>
109113
)}
110114
</div>
111-
</h4>
115+
</div>
112116
<div className="max-h-[50vh] overflow-y-auto">
113117
{diffs ? (
114118
<DepsDiff
@@ -120,13 +124,10 @@ export const DepsTable = ({
120124
content={{
121125
json: Object.keys(deps)
122126
.sort() // Sort the keys alphabetically
123-
.reduce(
124-
(obj, key) => {
125-
obj[key] = deps[key]; // Rebuild the object with sorted keys
126-
return obj;
127-
},
128-
{} as Record<string, string>
129-
),
127+
.reduce((obj, key) => {
128+
obj[key] = deps[key]; // Rebuild the object with sorted keys
129+
return obj;
130+
}, {} as Record<string, string>),
130131
}}
131132
mode={Mode.tree}
132133
mainMenuBar={false}

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const TestQrCode = ({ name, hash }: { name?: string; hash: string }) => {
5151
className="ant-typography-edit"
5252
content={
5353
<div>
54-
<div className="text-center my-1 mx-auto">
54+
<div className="text-center my-2 mx-auto">
5555
测试二维码 <br />
5656
<a
5757
target="_blank"
@@ -62,15 +62,17 @@ const TestQrCode = ({ name, hash }: { name?: string; hash: string }) => {
6262
如何使用?
6363
</a>
6464
</div>
65-
<QRCode value={codeValue} bordered={false} className="my-0 mx-auto" />
66-
<div className="text-center my-0 mx-auto">{name}</div>
65+
<div className="flex justify-center">
66+
<QRCode value={codeValue} bordered={false} />
67+
</div>
68+
<div className="text-center my-2 mx-auto">{name}</div>
6769
{/* <div style={{ textAlign: 'center', margin: '0 auto' }}>{hash}</div> */}
6870
<div>
6971
<Input.TextArea
7072
readOnly
7173
autoSize
7274
value={codeValue}
73-
className="mb-1"
75+
className="mb-2!"
7476
/>
7577
<div className="flex flex-row items-center">
7678
<Checkbox

src/pages/manage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from "antd";
1515

1616
import { Link, useParams } from "react-router-dom";
17-
import "./index.scss";
17+
import "./manage.css";
1818

1919
import { api } from "@/services/api";
2020
import { useApp } from "@/utils/hooks";

0 commit comments

Comments
 (0)