diff --git a/postcss.config.mjs b/postcss.config.mjs
index cd0d6362c..ec8c02982 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,5 +1,6 @@
 import UnoCSS from "@unocss/postcss";
+import autoprefixer from "autoprefixer";
 
 export default {
-  plugins: [UnoCSS()],
+  plugins: [UnoCSS(), autoprefixer()],
 };
diff --git a/rspack.config.ts b/rspack.config.ts
index 793afe542..f0fe226a7 100644
--- a/rspack.config.ts
+++ b/rspack.config.ts
@@ -66,20 +66,9 @@ export default defineConfig({
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [
-          {
-            loader: "postcss-loader",
-            options: {
-              postcssOptions: {
-                plugins: {
-                  autoprefixer: {},
-                },
-              },
-            },
-          },
-        ],
-        type: "css",
+        test: /\.css$/i,
+        type: "css/auto",
+        use: ["postcss-loader"],
       },
       {
         test: /\.(svg|png)$/,
diff --git a/src/index.css b/src/index.css
index b183908e9..6eb4944b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 @unocss preflights;
 @unocss default;
+@unocss;
 
 body {
     scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
@@ -17,4 +18,19 @@ body[arco-theme='light'] {
     --color-scrollbar-thumb: #6b6b6b;
     --color-scrollbar-track: #f0f0f0;
     --color-scrollbar-thumb-hover: #8c8c8c;
-}
\ No newline at end of file
+}
+
+:root {
+	--sc-zero-1: 0;
+	--sc-zero-2: 0;
+	--sc-zero-3: 0;
+	--sc-zero-4: 0;
+}
+
+/* 自定义 .sc-inset-0 避免打包成 inset: 0 使旧浏览器布局错位 */
+.sc-inset-0 {
+	top: var(--sc-zero-1);
+	left: var(--sc-zero-2);
+	right: var(--sc-zero-3);
+	bottom: var(--sc-zero-4);
+}
diff --git a/src/pages/batchupdate/App.tsx b/src/pages/batchupdate/App.tsx
index 3fb0fa7b6..6bc55872f 100644
--- a/src/pages/batchupdate/App.tsx
+++ b/src/pages/batchupdate/App.tsx
@@ -256,7 +256,7 @@ function App() {
                   title={
                     <span
                       onClick={() => openUpdatePage(item.uuid)}
-                      className="text-clickable text-gray-900 dark:text-gray-100 !hover:text-blue-600 dark:hover:text-blue-400"
+                      className="tw-text-clickable tw-text-gray-900 dark:tw-text-gray-100 !hover:tw-text-blue-600 dark:hover:tw-text-blue-400"
                     >
                       <Typography.Ellipsis rows={1} expandable={false} showTooltip={{ mini: true }}>
                         {item.script?.name}
@@ -285,7 +285,7 @@ function App() {
                     </>
                   }
                 >
-                  <Space className="pb-2">
+                  <Space className="tw-pb-2">
                     <Space direction="vertical">
                       <Text>{t("updatepage.old_version_")}</Text>
                       <Text>{t("updatepage.new_version_")}</Text>
@@ -377,31 +377,31 @@ function App() {
   return (
     <>
       {
-        <div className="mb-2 text-gray-800 dark:text-gray-200">
-          <div className="flex flex-row items-center gap-2">
-            <Typography.Title heading={6} className="!m-0 text-gray-900 dark:text-gray-100">
+        <div className="tw-mb-2 tw-text-gray-800 dark:tw-text-gray-200">
+          <div className="tw-flex tw-flex-row tw-items-center tw-gap-2">
+            <Typography.Title heading={6} className="!tw-m-0 tw-text-gray-900 dark:tw-text-gray-100">
               {t("updatepage.main_header")}
             </Typography.Title>
             <IconSync
               spin={checkUpdateSpin}
               onClick={() => onCheckUpdateClick()}
-              className="cursor-pointer text-gray-700 dark:text-gray-300"
+              className="tw-cursor-pointer tw-text-gray-700 dark:tw-text-gray-300"
             />
           </div>
-          <div className="flex flex-row indent-4">
-            <Typography.Text className="text-gray-700 dark:text-gray-300">{mStatusText}</Typography.Text>
+          <div className="tw-flex tw-flex-row tw-indent-4">
+            <Typography.Text className="tw-text-gray-700 dark:tw-text-gray-300">{mStatusText}</Typography.Text>
           </div>
           {mRecords === null ? (
             <></>
           ) : (
             <>
               {mRecords.site.length === 0 && mRecords.other.length === 0 ? (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">{t("updatepage.status_no_update")}</Text>
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">{t("updatepage.status_no_update")}</Text>
                 </div>
               ) : (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_n_update").replace("$0", `${mRecords.site.length + mRecords.other.length}`)}
                   </Text>
                 </div>
@@ -410,15 +410,15 @@ function App() {
                 // <div><Text>{"没有已忽略的更新"}</Text></div>
                 <></>
               ) : (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_n_ignored").replace("$0", `${mRecords.ignored.length}`)}
                   </Text>
                 </div>
               )}
               {mTimeClose >= 0 ? (
-                <div className="flex flex-row indent-4">
-                  <Text className="text-gray-700 dark:text-gray-300">
+                <div className="tw-flex tw-flex-row tw-indent-4">
+                  <Text className="tw-text-gray-700 dark:tw-text-gray-300">
                     {t("updatepage.status_autoclose").replace("$0", `${mTimeClose}`)}
                   </Text>
                 </div>
@@ -439,9 +439,9 @@ function App() {
             <Collapse
               defaultActiveKey={[]}
               className={[
-                "justify-self-center",
+                "tw-justify-self-center",
                 mRecords.site.length === 0 && mRecords.other.length === 0 && mRecords.ignored.length === 0
-                  ? "hidden"
+                  ? "tw-hidden"
                   : "",
               ]}
               style={{ width: "calc(100vw - 64px)" }}
@@ -481,7 +481,7 @@ function App() {
                   <CollapseItem
                     header={`${t("updatepage.header_other_update")}`}
                     name="list-other"
-                    className={[paramSite ? "" : "hidden"]}
+                    className={[paramSite ? "" : "tw-hidden"]}
                     disabled={!mRecords?.other?.length || isDoingTask}
                     extra={
                       mRecords?.other?.length ? (
diff --git a/src/pages/batchupdate/main.tsx b/src/pages/batchupdate/main.tsx
index 55037311e..f87ac8a8a 100644
--- a/src/pages/batchupdate/main.tsx
+++ b/src/pages/batchupdate/main.tsx
@@ -21,7 +21,7 @@ loggerCore.logger().debug("batchupdate page start");
 
 const Root = (
   <AppProvider>
-    <MainLayout className="!flex-col !px-4 box-border batchupdate-mainlayout">
+    <MainLayout className="!tw-flex-col !tw-px-4 tw-box-border batchupdate-mainlayout">
       <App />
     </MainLayout>
   </AppProvider>
diff --git a/src/pages/components/ScriptMenuList/index.tsx b/src/pages/components/ScriptMenuList/index.tsx
index d29c8756f..fc4d6a09f 100644
--- a/src/pages/components/ScriptMenuList/index.tsx
+++ b/src/pages/components/ScriptMenuList/index.tsx
@@ -89,7 +89,7 @@ const MenuItem = React.memo(({ menuItems, uuid }: MenuItemProps) => {
       }}
     >
       <Button
-        className="text-left"
+        className="tw-text-left"
         type="secondary"
         htmlType="submit"
         icon={<IconMenu />}
@@ -219,10 +219,10 @@ const ListMenuItem = React.memo(
           name={item.uuid}
           contentStyle={{ padding: "0 0 0 40px" }}
         >
-          <div className="flex flex-col">
+          <div className="tw-flex tw-flex-col">
             {isBackscript && (
               <Button
-                className="text-left"
+                className="tw-text-left"
                 type="secondary"
                 icon={item.runStatus !== SCRIPT_RUN_STATUS_RUNNING ? <RiPlayFill /> : <RiStopFill />}
                 onClick={() => {
@@ -238,7 +238,7 @@ const ListMenuItem = React.memo(
               </Button>
             )}
             <Button
-              className="text-left"
+              className="tw-text-left"
               type="secondary"
               icon={<IconEdit />}
               onClick={() => {
@@ -250,7 +250,7 @@ const ListMenuItem = React.memo(
             </Button>
             {url && isEffective !== null && (
               <Button
-                className="text-left"
+                className="tw-text-left"
                 status="warning"
                 type="secondary"
                 icon={!isEffective ? <IconPlus /> : <IconMinus />}
@@ -264,13 +264,13 @@ const ListMenuItem = React.memo(
               icon={<IconDelete />}
               onOk={() => handleDeleteScript(item.uuid)}
             >
-              <Button className="text-left" status="danger" type="secondary" icon={<IconDelete />}>
+              <Button className="tw-text-left" status="danger" type="secondary" icon={<IconDelete />}>
                 {t("delete")}
               </Button>
             </Popconfirm>
           </div>
         </CollapseItem>
-        <div className="arco-collapse-item-content-box flex flex-col" style={{ padding: "0 0 0 40px" }}>
+        <div className="arco-collapse-item-content-box tw-flex tw-flex-col" style={{ padding: "0 0 0 40px" }}>
           {/* 依数量与展开状态决定要显示的分组项（收合时只显示前 menuExpandNum 笔） */}
           {visibleMenus.map(({ uuid, groupKey, menus }) => {
             // 不同脚本之间可能出现相同的 groupKey；为避免 React key 冲突，需加上 uuid 做区分。
@@ -278,7 +278,7 @@ const ListMenuItem = React.memo(
           })}
           {shouldShowMore && (
             <Button
-              className="text-left"
+              className="tw-text-left"
               key="expand"
               type="secondary"
               icon={isExpand ? <IconCaretUp /> : <IconCaretDown />}
@@ -289,7 +289,7 @@ const ListMenuItem = React.memo(
           )}
           {item.hasUserConfig && (
             <Button
-              className="text-left"
+              className="tw-text-left"
               key="config"
               type="secondary"
               icon={<IconSettings />}
diff --git a/src/pages/components/ScriptResource/index.tsx b/src/pages/components/ScriptResource/index.tsx
index 4ea8b9d6d..15d7fb8cb 100644
--- a/src/pages/components/ScriptResource/index.tsx
+++ b/src/pages/components/ScriptResource/index.tsx
@@ -143,8 +143,8 @@ const ScriptResource: React.FC<{
       onOk={onOk}
       onCancel={onCancel}
     >
-      <Space className="w-full" direction="vertical">
-        <Space className="!flex justify-end">
+      <Space className="tw-w-full" direction="vertical">
+        <Space className="!tw-flex tw-justify-end">
           <Popconfirm
             focusLock
             title={t("confirm_clear_resource")}
diff --git a/src/pages/components/ScriptSetting/Match.tsx b/src/pages/components/ScriptSetting/Match.tsx
index 1cf1012d6..a8ff7fedc 100644
--- a/src/pages/components/ScriptSetting/Match.tsx
+++ b/src/pages/components/ScriptSetting/Match.tsx
@@ -248,7 +248,7 @@ const Match: React.FC<{
           }}
         />
       </Modal>
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("website_match")}</Typography.Title>
         <Space>
           <Button
@@ -277,7 +277,7 @@ const Match: React.FC<{
       </div>
       <Table columns={columns} data={match} rowKey="id" pagination={false} />
       <Divider />
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("website_exclude")}</Typography.Title>
         <Space>
           <Button
diff --git a/src/pages/components/ScriptSetting/Permission.tsx b/src/pages/components/ScriptSetting/Permission.tsx
index 548ee2aef..3eac8eaf4 100644
--- a/src/pages/components/ScriptSetting/Permission.tsx
+++ b/src/pages/components/ScriptSetting/Permission.tsx
@@ -130,7 +130,7 @@ const PermissionManager: React.FC<{
           }
         }}
       >
-        <Space className="w-full" direction="vertical">
+        <Space className="tw-w-full" direction="vertical">
           <Select
             value={permissionValue?.permission}
             onChange={(e) => {
@@ -156,7 +156,7 @@ const PermissionManager: React.FC<{
           </Checkbox>
         </Space>
       </Modal>
-      <div className="flex flex-row justify-between pb-2">
+      <div className="tw-flex tw-flex-row tw-justify-between tw-pb-2">
         <Typography.Title heading={6}>{t("permission_management")}</Typography.Title>
         <Space>
           <Button
diff --git a/src/pages/components/ScriptStorage/index.tsx b/src/pages/components/ScriptStorage/index.tsx
index bc891801b..f9ab5cb57 100644
--- a/src/pages/components/ScriptStorage/index.tsx
+++ b/src/pages/components/ScriptStorage/index.tsx
@@ -248,8 +248,8 @@ const ScriptStorage: React.FC<{
           </Form>
         )}
       </Modal>
-      <Space className="w-full" direction="vertical">
-        <Space className="!flex justify-end">
+      <Space className="tw-w-full" direction="vertical">
+        <Space className="!tw-flex tw-justify-end">
           {isEdit ? (
             <>
               <Button
diff --git a/src/pages/components/layout/MainLayout.tsx b/src/pages/components/layout/MainLayout.tsx
index f0458b2e4..87489afd8 100644
--- a/src/pages/components/layout/MainLayout.tsx
+++ b/src/pages/components/layout/MainLayout.tsx
@@ -201,13 +201,13 @@ const MainLayout: React.FC<{
       locale={arcoLocale(i18n.language)}
     >
       {contextHolder}
-      <Layout>
+      <Layout className={"tw-min-h-screen"}>
         <Layout.Header
           style={{
             height: "50px",
             borderBottom: "1px solid var(--color-neutral-3)",
           }}
-          className="flex items-center justify-between px-4"
+          className="tw-flex tw-items-center tw-justify-between tw-px-4"
         >
           <Modal
             title={t("import_link")}
@@ -230,9 +230,9 @@ const MainLayout: React.FC<{
               }}
             />
           </Modal>
-          <div className="flex row items-center">
+          <div className="tw-flex tw-flex-row tw-items-center">
             <img style={{ height: "40px" }} src="/assets/logo.png" alt="ScriptCat" />
-            <Typography.Title heading={4} className="!m-0">
+            <Typography.Title heading={4} className="!tw-m-0">
               {"ScriptCat"}
             </Typography.Title>
           </div>
@@ -301,7 +301,7 @@ const MainLayout: React.FC<{
                   style={{
                     color: "var(--color-text-1)",
                   }}
-                  className="!text-size-sm"
+                  className="!tw-text-size-sm"
                 >
                   <RiPlayListAddLine /> {t("create_script")} <IconDown />
                 </Button>
@@ -342,7 +342,7 @@ const MainLayout: React.FC<{
                 style={{
                   color: "var(--color-text-1)",
                 }}
-                className="!text-lg"
+                className="!tw-text-lg"
               />
             </Dropdown>
             {showLanguage && (
@@ -375,14 +375,14 @@ const MainLayout: React.FC<{
                   style={{
                     color: "var(--color-text-1)",
                   }}
-                  className="!text-lg"
+                  className="!tw-text-lg"
                 ></Button>
               </Dropdown>
             )}
           </Space>
         </Layout.Header>
         <Layout
-          className={`absolute top-50px bottom-0 w-full ${className}`}
+          className={`tw-bottom-0 tw-w-full ${className}`}
           style={{
             background: "var(--color-fill-2)",
           }}
@@ -390,13 +390,13 @@ const MainLayout: React.FC<{
         >
           <input id="import-local" {...getInputProps({ style: { display: "none" } })} />
           <div
+            className="sc-inset-0"
             style={{
               position: "absolute",
               zIndex: 100,
               display: isDragActive ? "flex" : "none",
               justifyContent: "center",
               alignItems: "center",
-              inset: 0,
               margin: "auto",
               color: "grey",
               fontSize: 36,
diff --git a/src/pages/components/layout/Sider.tsx b/src/pages/components/layout/Sider.tsx
index 2867cdcc8..bb5dbdc39 100644
--- a/src/pages/components/layout/Sider.tsx
+++ b/src/pages/components/layout/Sider.tsx
@@ -49,8 +49,8 @@ const Sider: React.FC = () => {
   return (
     <HashRouter>
       <SiderGuide ref={guideRef} />
-      <Layout.Sider className="h-full" collapsed={collapsed} width={170}>
-        <div className="flex flex-col justify-between h-full">
+      <Layout.Sider collapsed={collapsed} width={170}>
+        <div className="tw-flex tw-flex-col tw-justify-between tw-h-full">
           <Menu style={{ width: "100%" }} selectedKeys={[menuSelect]} selectable onClickMenuItem={handleMenuClick}>
             <CustomLink to="/">
               <MenuItem key="/" className="menu-script">
@@ -100,7 +100,7 @@ const Sider: React.FC = () => {
                 key="/external_links"
                 title={
                   <>
-                    <RiLinkM /> <span className="grow">{t("external_links")}</span>
+                    <RiLinkM /> <span className="tw-grow">{t("external_links")}</span>
                   </>
                 }
               >
@@ -160,23 +160,25 @@ const Sider: React.FC = () => {
         style={{
           borderLeft: "1px solid var(--color-bg-5)",
           overflow: "hidden",
-          padding: 10,
-          height: "100%",
+          padding: 0,
+          height: "auto",
           boxSizing: "border-box",
           position: "relative",
         }}
       >
-        <Routes>
-          <Route index element={<ScriptList />} />
-          <Route path="/script/editor">
-            <Route path=":uuid" element={<ScriptEditor />} />
-            <Route path="" element={<ScriptEditor />} />
-          </Route>
-          <Route path="/subscribe" element={<SubscribeList />} />
-          <Route path="/logger" element={<Logger />} />
-          <Route path="/tools" element={<Tools />} />
-          <Route path="/setting" element={<Setting />} />
-        </Routes>
+        <div className="tw-absolute sc-inset-0 tw-m-[10px]">
+          <Routes>
+            <Route index element={<ScriptList />} />
+            <Route path="/script/editor">
+              <Route path=":uuid" element={<ScriptEditor />} />
+              <Route path="" element={<ScriptEditor />} />
+            </Route>
+            <Route path="/subscribe" element={<SubscribeList />} />
+            <Route path="/logger" element={<Logger />} />
+            <Route path="/tools" element={<Tools />} />
+            <Route path="/setting" element={<Setting />} />
+          </Routes>
+        </div>
       </Layout.Content>
     </HashRouter>
   );
diff --git a/src/pages/confirm/App.tsx b/src/pages/confirm/App.tsx
index bfd32f200..b440a33ad 100644
--- a/src/pages/confirm/App.tsx
+++ b/src/pages/confirm/App.tsx
@@ -62,15 +62,15 @@ function App() {
   const metadata = useMemo(() => (confirm && confirm.metadata && Object.keys(confirm.metadata)) || [], [confirm]);
 
   return (
-    <div className="h-full">
+    <div className="tw-h-full">
       <Space direction="vertical">
-        <span className="text-2xl font-500">{confirm?.title}</span>
+        <span className="tw-text-2xl tw-font-500">{confirm?.title}</span>
         {metadata.map((key) => (
-          <span className="text-base" key={key}>
+          <span className="tw-text-base" key={key}>
             {`${key}: ${confirm!.metadata![key]}`}
           </span>
         ))}
-        <span className="text-xl font-500">{confirm?.describe}</span>
+        <span className="tw-text-xl tw-font-500">{confirm?.describe}</span>
         <div>
           <Button type="primary" onClick={handleConfirm(false, 1)}>
             {`${t("ignore")} (${second})`}
diff --git a/src/pages/confirm/main.tsx b/src/pages/confirm/main.tsx
index 05169e5d9..51985671b 100644
--- a/src/pages/confirm/main.tsx
+++ b/src/pages/confirm/main.tsx
@@ -20,7 +20,7 @@ loggerCore.logger().debug("confirm page start");
 
 const Root = (
   <AppProvider>
-    <MainLayout className="!flex-col !px-4 box-border">
+    <MainLayout className="!tw-flex-col !tw-px-4 tw-box-border">
       <App />
     </MainLayout>
   </AppProvider>
diff --git a/src/pages/import/App.tsx b/src/pages/import/App.tsx
index 1bc9c9c55..755242d52 100644
--- a/src/pages/import/App.tsx
+++ b/src/pages/import/App.tsx
@@ -29,7 +29,7 @@ const ScriptListItem = React.memo(
   }) => {
     return (
       <div
-        className="flex flex-row justify-between p-2"
+        className="tw-flex tw-flex-row tw-justify-between tw-p-2"
         key={`script_${index}`}
         style={{
           background: item.error ? "rgb(var(--red-1))" : item.install ? "rgb(var(--arcoblue-1))" : "",
@@ -42,14 +42,14 @@ const ScriptListItem = React.memo(
           <Typography.Title heading={6} style={{ color: "rgb(var(--blue-5))" }}>
             {item.script?.script?.name || item.error || t("unknown")}
           </Typography.Title>
-          <span className="text-sm color-gray-5">{`${t("author")}: ${item.script?.script?.metadata.author?.[0]}`}</span>
-          <span className="text-sm color-gray-5">
+          <span className="tw-text-sm tw-color-gray-5">{`${t("author")}: ${item.script?.script?.metadata.author?.[0]}`}</span>
+          <span className="tw-text-sm tw-color-gray-5">
             {`${t("description")}: ${item.script?.script?.metadata.description?.[0]}`}
           </span>
-          <span className="text-sm color-gray-5">
+          <span className="tw-text-sm tw-color-gray-5">
             {`${t("source")}: ${item.options?.meta.file_url || t("local_creation")}`}
           </span>
-          <span className="text-sm color-gray-5">
+          <span className="tw-text-sm tw-color-gray-5">
             {`${t("operation")}: `}
             {(item.install && (item.script?.oldScript ? t("update") : t("add_new"))) ||
               (item.error
@@ -57,9 +57,9 @@ const ScriptListItem = React.memo(
                 : t("no_operation"))}
           </span>
         </Space>
-        <div className="flex flex-col justify-center" style={{ minWidth: "80px", textAlign: "center" }}>
-          <span className="text-sm color-gray-5">{t("enable_script")}</span>
-          <div className="text-center">
+        <div className="tw-flex tw-flex-col tw-justify-center" style={{ minWidth: "80px", textAlign: "center" }}>
+          <span className="tw-text-sm tw-color-gray-5">{t("enable_script")}</span>
+          <div className="tw-text-center">
             <Switch
               size="small"
               checked={item.script?.script?.status === SCRIPT_STATUS_ENABLE}
diff --git a/src/pages/import/main.tsx b/src/pages/import/main.tsx
index 890e2ec9e..fe51ddedd 100644
--- a/src/pages/import/main.tsx
+++ b/src/pages/import/main.tsx
@@ -20,7 +20,7 @@ loggerCore.logger().debug("import page start");
 
 const Root = (
   <AppProvider>
-    <MainLayout className="!flex-col !p-[10px] box-border h-auto overflow-auto">
+    <MainLayout className="!tw-flex-col !tw-p-[10px] tw-box-border tw-h-auto tw-overflow-auto">
       <App />
     </MainLayout>
   </AppProvider>
diff --git a/src/pages/install/App.tsx b/src/pages/install/App.tsx
index ee282d963..32321ab6f 100644
--- a/src/pages/install/App.tsx
+++ b/src/pages/install/App.tsx
@@ -369,7 +369,7 @@ function App() {
     if (metadataLive.crontab) {
       ret.push(<Typography.Text key="crontab">{t("scheduled_script_description_title")}</Typography.Text>);
       ret.push(
-        <div key="cronta-nexttime" className="flex flex-row flex-wrap gap-x-2">
+        <div key="cronta-nexttime" className="tw-flex tw-flex-row tw-flex-wrap tw-gap-x-2">
           <Typography.Text>{t("scheduled_script_description_description_expr")}</Typography.Text>
           <Typography.Text code>{metadataLive.crontab[0]}</Typography.Text>
           <Typography.Text>{t("scheduled_script_description_description_next")}</Typography.Text>
@@ -676,7 +676,7 @@ function App() {
 
   if (!hasUUIDorFile) {
     return urlHref ? (
-      <div className="flex justify-center items-center h-screen">
+      <div className="tw-flex tw-justify-center tw-items-center tw-h-screen">
         <Space direction="vertical" align="center">
           <Typography.Title heading={3}>{t("install_page_loading")}</Typography.Title>
           {fetchingState.loadingStatus && (
@@ -689,7 +689,7 @@ function App() {
         </Space>
       </div>
     ) : (
-      <div className="flex justify-center items-center h-screen">
+      <div className="tw-flex tw-justify-center tw-items-center tw-h-screen">
         <Space direction="vertical" align="center">
           <Typography.Title heading={3}>{t("invalid_page")}</Typography.Title>
         </Space>
@@ -698,9 +698,9 @@ function App() {
   }
 
   return (
-    <div id="install-app-container" className="flex flex-col">
-      <div className="flex flex-row gap-x-3 pt-3 pb-3">
-        <div className="grow-1 shrink-1 flex flex-row justify-start items-center">
+    <div id="install-app-container" className="tw-flex tw-flex-col">
+      <div className="tw-flex tw-flex-row tw-gap-x-3 tw-pt-3 tw-pb-3">
+        <div className="tw-grow-1 tw-shrink-1 tw-flex tw-flex-row tw-justify-start tw-items-center">
           {upsertScript?.metadata.icon && (
             <Avatar size={32} shape="square" style={{ marginRight: "8px" }}>
               <img src={upsertScript.metadata.icon[0]} alt={upsertScript.name} />
@@ -708,7 +708,7 @@ function App() {
           )}
           {upsertScript && (
             <Tooltip position="tl" content={i18nName(upsertScript)}>
-              <Typography.Text bold className="text-size-lg truncate w-0 grow-1">
+              <Typography.Text bold className="tw-text-size-lg tw-truncate tw-w-0 tw-grow-1">
                 {i18nName(upsertScript)}
               </Typography.Text>
             </Tooltip>
@@ -717,8 +717,8 @@ function App() {
             <Switch style={{ marginLeft: "8px" }} checked={enable} onChange={handleStatusChange} />
           </Tooltip>
         </div>
-        <div className="grow-0 shrink-1 flex flex-row flex-wrap gap-x-2 gap-y-1 items-center">
-          <div className="flex flex-row flex-nowrap gap-x-2">
+        <div className="tw-grow-0 tw-shrink-1 tw-flex tw-flex-row tw-flex-wrap tw-gap-x-2 tw-gap-y-1 tw-items-center">
+          <div className="tw-flex tw-flex-row tw-flex-nowrap tw-gap-x-2">
             {oldScriptVersion && (
               <Tooltip content={`${t("current_version")}: v${oldScriptVersion}`}>
                 <Tag bordered>{oldScriptVersion}</Tag>
@@ -734,11 +734,11 @@ function App() {
           </div>
         </div>
       </div>
-      <div className="shrink-1 grow-1 overflow-y-auto pl-4 pr-4 gap-y-2 flex flex-col mb-4">
-        <div className="flex flex-wrap gap-x-3 gap-y-2 items-start">
-          <div className="flex flex-col shrink-1 grow-1 basis-8/12">
-            <div className="grow-1 shrink-0">
-              <div className="flex flex-wrap gap-x-2 gap-y-1 tag-container float-right">
+      <div className="tw-shrink-1 tw-grow-1 tw-overflow-y-auto tw-pl-4 tw-pr-4 tw-gap-y-2 tw-flex tw-flex-col tw-mb-4 tw-h-0">
+        <div className="tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-2 tw-items-start">
+          <div className="tw-flex tw-flex-col tw-shrink-1 tw-grow-1 tw-basis-8/12">
+            <div className="tw-grow-1 tw-shrink-0">
+              <div className="tw-flex tw-flex-wrap tw-gap-x-2 tw-gap-y-1 tag-container tw-float-right">
                 {(metadataLive.background || metadataLive.crontab) && (
                   <Tooltip color="green" content={t("background_script_tag")}>
                     <Tag bordered color="green">
@@ -792,9 +792,9 @@ function App() {
             </div>
           </div>
           {descriptionParagraph?.length ? (
-            <div className="flex flex-col shrink-0 grow-1">
+            <div className="tw-flex tw-flex-col tw-shrink-0 tw-grow-1">
               <Typography>
-                <Typography.Paragraph blockquote className="pt-2 pb-2">
+                <Typography.Paragraph blockquote className="tw-pt-2 tw-pb-2">
                   {descriptionParagraph}
                 </Typography.Paragraph>
               </Typography>
@@ -802,9 +802,9 @@ function App() {
           ) : (
             <></>
           )}
-          <div className="flex flex-row flex-wrap gap-x-4">
+          <div className="tw-flex tw-flex-row tw-flex-wrap tw-gap-x-4">
             {permissions.map((item) => (
-              <div key={item.label} className="flex flex-col gap-y-2">
+              <div key={item.label} className="tw-flex tw-flex-col tw-gap-y-2">
                 {item.value?.length > 0 ? (
                   <>
                     <Typography.Text bold color={item.color}>
@@ -832,11 +832,11 @@ function App() {
             ))}
           </div>
         </div>
-        <div className="flex flex-row flex-wrap items-center gap-2">
-          <div className="grow-1">
+        <div className="tw-flex tw-flex-row tw-flex-wrap tw-items-center tw-gap-2">
+          <div className="tw-grow-1">
             <Typography.Text type="error">{t("install_from_legitimate_sources_warning")}</Typography.Text>
           </div>
-          <div className="grow-1 shrink-0 text-end">
+          <div className="tw-grow-1 tw-shrink-0 tw-text-end">
             <Space>
               <Button.Group>
                 <Button type="primary" size="small" onClick={handleInstallBasic} disabled={watchFile}>
@@ -899,6 +899,7 @@ function App() {
         <div id="show-code-container">
           <CodeEditor
             id="show-code"
+            className="sc-inset-0"
             code={scriptCode || undefined}
             diffCode={diffCode === scriptCode ? "" : diffCode || ""}
           />
diff --git a/src/pages/install/index.css b/src/pages/install/index.css
index 58a8e6797..b54e8fd9b 100644
--- a/src/pages/install/index.css
+++ b/src/pages/install/index.css
@@ -22,16 +22,14 @@
 	contain: strict;
 }
 
-#show-code {
+#show-code { /* 配合 .sc-inset-0 */
 	margin: 0px;
 	padding: 0px;
 	border: 0px;
-	width: 100%;
-	height: 100%;
 	overflow: hidden;
 	border: 1px solid var(--color-neutral-5);
 	box-sizing: border-box;
-	position: relative;
+	position: absolute;
 	background: #071119;
 }
 
diff --git a/src/pages/install/main.tsx b/src/pages/install/main.tsx
index 8953bb657..7f87023e2 100644
--- a/src/pages/install/main.tsx
+++ b/src/pages/install/main.tsx
@@ -25,7 +25,7 @@ loggerCore.logger().debug("install page start");
 
 const MyApp = () => (
   <AppProvider>
-    <MainLayout className="!flex-col !px-4 box-border">
+    <MainLayout className="!tw-flex-col !tw-px-4 tw-box-border">
       <App />
     </MainLayout>
   </AppProvider>
diff --git a/src/pages/options/main.tsx b/src/pages/options/main.tsx
index 199f51011..096203c58 100644
--- a/src/pages/options/main.tsx
+++ b/src/pages/options/main.tsx
@@ -27,7 +27,7 @@ loggerCore.logger().debug("options page start");
 
 const Root = (
   <AppProvider>
-    <MainLayout className="!flex-row" pageName="options">
+    <MainLayout className="!tw-flex-row" pageName="options">
       <Sider />
     </MainLayout>
   </AppProvider>
diff --git a/src/pages/options/routes/Logger.tsx b/src/pages/options/routes/Logger.tsx
index f08ced2a8..a945f3e05 100644
--- a/src/pages/options/routes/Logger.tsx
+++ b/src/pages/options/routes/Logger.tsx
@@ -192,7 +192,7 @@ function LoggerPage() {
                 }}
                 direction="vertical"
               >
-                <div className="text-sm font-medium">{t("labels")}</div>
+                <div className="tw-text-sm tw-font-medium">{t("labels")}</div>
                 <Space>
                   {querys.map((query, index) => (
                     <LogLabel
@@ -230,7 +230,7 @@ function LoggerPage() {
                 }}
                 direction="vertical"
               >
-                <div className="text-sm font-medium">{t("search_regex")}</div>
+                <div className="tw-text-sm tw-font-medium">{t("search_regex")}</div>
                 <Input value={search} onChange={(e) => setSearch(e)} />
               </Space>
             </Space>
diff --git a/src/pages/options/routes/ScriptList/ScriptCard.tsx b/src/pages/options/routes/ScriptList/ScriptCard.tsx
index f68d3e909..d54af4965 100644
--- a/src/pages/options/routes/ScriptList/ScriptCard.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptCard.tsx
@@ -128,17 +128,17 @@ export const ScriptCardItem = React.memo(
           boxSizing: "border-box",
         }}
       >
-        <div className="flex flex-col justify-between h-full gap-1">
-          <div className="flex flex-col gap-3">
-            <div className="flex flex-row justify-between items-start gap-1">
-              <div className="flex-1 min-w-0">
+        <div className="tw-flex tw-flex-col tw-justify-between tw-h-full tw-gap-1">
+          <div className="tw-flex tw-flex-col tw-gap-3">
+            <div className="tw-flex tw-flex-row tw-justify-between tw-items-start tw-gap-1">
+              <div className="tw-flex-1 tw-min-w-0">
                 <Link
                   to={`/script/editor/${item.uuid}`}
                   style={{
                     textDecoration: "none",
                   }}
                 >
-                  <div className="flex items-center gap-2 mb-2">
+                  <div className="tw-flex tw-items-center tw-gap-2 tw-mb-2">
                     <ScriptIcons script={item} size={24} />
                     <Text
                       style={{
@@ -189,10 +189,10 @@ export const ScriptCardItem = React.memo(
             </div>
 
             {/* 版本和更新时间 */}
-            <div className="flex flex-row gap-4 text-sm text-gray-500">
+            <div className="tw-flex tw-flex-row tw-gap-4 tw-text-sm tw-text-gray-500">
               {item.metadata.version && (
                 <div>
-                  <span className="font-medium">
+                  <span className="tw-font-medium">
                     {t("version")}
                     {": "}
                   </span>
@@ -200,16 +200,16 @@ export const ScriptCardItem = React.memo(
                 </div>
               )}
               <div className="script-updatetime">
-                <span className="font-medium">
+                <span className="tw-font-medium">
                   {t("last_updated")}
                   {": "}
                 </span>
-                <UpdateTimeCell className="text-sm text-gray-500" script={item} />
+                <UpdateTimeCell className="tw-text-sm tw-text-gray-500" script={item} />
               </div>
             </div>
 
             {/* 运行状态 */}
-            <div className="flex flex-row gap-4">
+            <div className="tw-flex tw-flex-row tw-gap-4">
               {item.type !== SCRIPT_TYPE_NORMAL && (
                 <div>
                   <Tooltip
@@ -234,7 +234,7 @@ export const ScriptCardItem = React.memo(
               <SourceCell item={item} t={t} />
             </div>
 
-            <div className="flex flex-row gap-3 items-center apply_to_run_status">
+            <div className="tw-flex tw-flex-row tw-gap-3 tw-items-center apply_to_run_status">
               {item.type === SCRIPT_TYPE_NORMAL && (
                 <Avatar.Group size={20}>
                   {favoriteMemo.trimmed.map((fav) => (
@@ -248,16 +248,16 @@ export const ScriptCardItem = React.memo(
                       }}
                     />
                   ))}
-                  {favoriteMemo.originalLen > 8 && <span className="text-xs ml-1">{"..."}</span>}
+                  {favoriteMemo.originalLen > 8 && <span className="tw-text-xs tw-ml-1">{"..."}</span>}
                 </Avatar.Group>
               )}
               <HomeCell item={item} />
             </div>
           </div>
           {/* 操作按钮 */}
-          <div className="flex flex-col script-action">
+          <div className="tw-flex tw-flex-col script-action">
             <Divider style={{ margin: "4px 0 14px" }} />
-            <div className="flex flex-row justify-between">
+            <div className="tw-flex tw-flex-row tw-justify-between">
               <div>
                 {item.type !== SCRIPT_TYPE_NORMAL && (
                   <Button
@@ -271,7 +271,7 @@ export const ScriptCardItem = React.memo(
                   </Button>
                 )}
               </div>
-              <div className="flex flex-row justify-between items-center">
+              <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
                 <Space>
                   <Link to={`/script/editor/${item.uuid}`}>
                     <Button type="outline" icon={<RiPencilFill />} size="mini">
@@ -415,8 +415,8 @@ export const ScriptCard = ({
           padding: "0 16px",
         }}
       >
-        <div className="flex flex-row justify-between items-center" style={{ padding: "8px 0" }}>
-          <div className="flex-1">
+        <div className="tw-flex tw-flex-row tw-justify-between tw-items-center" style={{ padding: "8px 0" }}>
+          <div className="tw-flex-1">
             <Input.Search
               size="small"
               searchButton
diff --git a/src/pages/options/routes/ScriptList/ScriptTable.tsx b/src/pages/options/routes/ScriptList/ScriptTable.tsx
index 9975a5147..6e341de1f 100644
--- a/src/pages/options/routes/ScriptList/ScriptTable.tsx
+++ b/src/pages/options/routes/ScriptList/ScriptTable.tsx
@@ -139,7 +139,7 @@ const FilterDropdown = React.memo(
       confirm(filterKeys);
     };
     return (
-      <div className="arco-table-custom-filter flex flex-row gap-2">
+      <div className="arco-table-custom-filter tw-flex tw-flex-row tw-gap-2">
         <Input.Search
           ref={inputRef}
           size="small"
@@ -551,7 +551,7 @@ export const ScriptTable = ({
               setTimeout(() => inputRef.current!.focus(), 1);
             }
           },
-          className: "max-w-[240px] min-w-[100px]",
+          className: "tw-max-w-[240px] tw-min-w-[100px]",
           render: (col: string, item: ListType) => <NameCell col={col} item={item} />,
         },
         {
@@ -597,7 +597,7 @@ export const ScriptTable = ({
         },
         {
           title: (
-            <div className="flex flex-row justify-between items-center">
+            <div className="tw-flex tw-flex-row tw-justify-between tw-items-center">
               <span>{t("action")}</span>
               <Space size={4}>
                 <Tooltip content={sidebarOpen ? t("open_sidebar") : t("close_sidebar")}>
@@ -785,7 +785,7 @@ export const ScriptTable = ({
       {showAction && (
         <Card>
           <div
-            className="flex flex-row justify-between items-center"
+            className="tw-flex tw-flex-row tw-justify-between tw-items-center"
             style={{
               padding: "8px 6px",
             }}
diff --git a/src/pages/options/routes/ScriptList/Sidebar.tsx b/src/pages/options/routes/ScriptList/Sidebar.tsx
index ef59a4eab..7578b7787 100644
--- a/src/pages/options/routes/ScriptList/Sidebar.tsx
+++ b/src/pages/options/routes/ScriptList/Sidebar.tsx
@@ -50,15 +50,15 @@ const FilterGroup = React.memo<FilterGroupProps>(
     }, [items]);
 
     return (
-      <div className="mb-4">
+      <div className="tw-mb-4">
         <div
-          className="flex items-center justify-between px-2 py-1 cursor-pointer rounded transition-all duration-200 hover:bg-fill-2"
+          className="tw-flex tw-items-center tw-justify-between tw-px-2 tw-py-1 tw-cursor-pointer tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-fill-2"
           style={{ color: "var(--color-text-2)" }}
           onClick={() => onToggleCollapse(groupKey)}
         >
-          <span className="text-sm font-medium select-none">{title}</span>
+          <span className="tw-text-sm tw-font-medium tw-select-none">{title}</span>
           <div
-            className="transition-all duration-300 ease-out"
+            className="tw-transition-all tw-duration-300 tw-ease-out"
             style={{
               transform: isCollapsed ? "rotate(-90deg)" : "rotate(0deg)",
               transformOrigin: "center",
@@ -73,7 +73,7 @@ const FilterGroup = React.memo<FilterGroupProps>(
           </div>
         </div>
         <div
-          className="overflow-hidden transition-all duration-300 ease-out"
+          className="tw-overflow-hidden tw-transition-all tw-duration-300 tw-ease-out"
           style={{
             height: isCollapsed ? 0 : contentHeight || "auto",
             marginTop: isCollapsed ? 0 : "8px",
@@ -82,15 +82,13 @@ const FilterGroup = React.memo<FilterGroupProps>(
             transitionDelay: isCollapsed ? "0ms" : "50ms",
           }}
         >
-          <div ref={contentRef} className="space-y-1">
+          <div ref={contentRef} className="tw-space-y-1">
             {items.map((item, index) => {
               const isSelected = selectedItem === item.key;
               return (
                 <div
                   key={item.key}
-                  className={`flex items-center justify-between px-3 py-2 rounded cursor-pointer transition-all ease-out ${
-                    !isSelected ? "hover:bg-fill-2" : ""
-                  }`}
+                  className={`tw-flex tw-items-center tw-justify-between tw-px-3 tw-py-2 tw-rounded tw-cursor-pointer tw-transition-all tw-ease-out ${!isSelected ? "hover:tw-bg-fill-2" : ""}`}
                   style={{
                     backgroundColor: isSelected ? "var(--color-primary-light-1)" : "transparent",
                     color: isSelected ? "var(--color-primary-6)" : "var(--color-text-1)",
@@ -104,7 +102,7 @@ const FilterGroup = React.memo<FilterGroupProps>(
                   <Space size={8} style={{ flex: 1, minWidth: 0 }}>
                     {item.icon}
                     <span
-                      className="text-sm"
+                      className="tw-text-sm"
                       style={{
                         display: "inline-block",
                         overflow: "hidden",
@@ -118,7 +116,7 @@ const FilterGroup = React.memo<FilterGroupProps>(
                     </span>
                   </Space>
                   <span
-                    className="text-xs px-2 py-1 rounded"
+                    className="tw-text-xs tw-px-2 tw-py-1 tw-rounded"
                     style={{
                       backgroundColor: isSelected ? "var(--color-primary-light-2)" : "var(--color-fill-3)",
                       color: isSelected ? "var(--color-primary-6)" : "var(--color-text-3)",
@@ -171,7 +169,7 @@ const ScriptListSidebar: React.FC<SidebarProps> = React.memo(
 
     return (
       <div
-        className="w-64"
+        className="tw-w-64"
         style={{
           minWidth: "256px",
           padding: "16px",
@@ -180,7 +178,7 @@ const ScriptListSidebar: React.FC<SidebarProps> = React.memo(
           backgroundColor: "var(--color-bg-2)",
         }}
       >
-        <div className="space-y-4">
+        <div className="tw-space-y-4">
           <FilterGroup
             title={t("script_list.sidebar.status")}
             items={statusItems}
diff --git a/src/pages/options/routes/ScriptList/components.tsx b/src/pages/options/routes/ScriptList/components.tsx
index 2bfc63d10..d49ea0c74 100644
--- a/src/pages/options/routes/ScriptList/components.tsx
+++ b/src/pages/options/routes/ScriptList/components.tsx
@@ -39,7 +39,7 @@ export const MemoizedAvatar = React.memo(
         backgroundColor: "unset",
         borderWidth: 1,
       }}
-      className={website ? "cursor-pointer" : "cursor-default"}
+      className={website ? "tw-cursor-pointer" : "tw-cursor-default"}
       {...rest}
     >
       {icon ? <img title={match} src={icon} /> : <TbWorldWww title={match} color="#aaa" size={24} />}
diff --git a/src/pages/options/routes/ScriptList/hooks.tsx b/src/pages/options/routes/ScriptList/hooks.tsx
index 3d05b2ad1..58adc2496 100644
--- a/src/pages/options/routes/ScriptList/hooks.tsx
+++ b/src/pages/options/routes/ScriptList/hooks.tsx
@@ -463,7 +463,7 @@ export function useScriptSearch() {
         return {
           key: tag,
           label: tag,
-          icon: <div className={`w-3 h-3 arco-badge-color-${hashColor(tag)} rounded-full`} />,
+          icon: <div className={`tw-w-3 tw-h-3 arco-badge-color-${hashColor(tag)} tw-rounded-full`} />,
           count,
         };
       })
@@ -474,7 +474,7 @@ export function useScriptSearch() {
         return {
           key: source,
           label: source,
-          icon: <div className={`w-3 h-3 arco-badge-color-${hashColor(source)} rounded-full`} />,
+          icon: <div className={`tw-w-3 tw-h-3 arco-badge-color-${hashColor(source)} tw-rounded-full`} />,
           count,
         };
       })
diff --git a/src/pages/options/routes/ScriptList/index.tsx b/src/pages/options/routes/ScriptList/index.tsx
index fa9759ac4..ba010d3a7 100644
--- a/src/pages/options/routes/ScriptList/index.tsx
+++ b/src/pages/options/routes/ScriptList/index.tsx
@@ -75,9 +75,9 @@ function ScriptList() {
         overflowY: "auto",
       }}
     >
-      <div className="flex flex-col">
+      <div className="tw-flex tw-flex-col">
         {/* 主要内容区域 */}
-        <div className="flex flex-row relative">
+        <div className="tw-flex tw-flex-row tw-relative">
           {/* 侧边栏 */}
           <ScriptListSidebar
             open={sidebarOpen}
@@ -87,7 +87,7 @@ function ScriptList() {
           />
 
           {/* 主要表格/卡片区域 */}
-          <div className="flex-1">
+          <div className="tw-flex-1">
             {viewMode === "table" ? (
               <ScriptTable
                 loadingList={loadingList}
diff --git a/src/pages/options/routes/Setting.tsx b/src/pages/options/routes/Setting.tsx
index 790721049..aa7c25c85 100644
--- a/src/pages/options/routes/Setting.tsx
+++ b/src/pages/options/routes/Setting.tsx
@@ -57,15 +57,15 @@ function Setting() {
   }, [t]);
 
   return (
-    <Space className="setting w-full h-full overflow-auto relative" direction="vertical">
+    <Space className="setting tw-w-full tw-h-full tw-overflow-auto tw-relative" direction="vertical">
       {/* 基本设置 */}
       <Card title={t("general")} bordered={false}>
-        <div className="flex items-center justify-between min-h-10">
-          <div className="flex items-center gap-4 flex-1">
-            <span className="min-w-20 font-medium">{t("language")}</span>
+        <div className="tw-flex tw-items-center tw-justify-between tw-min-h-10">
+          <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+            <span className="tw-min-w-20 tw-font-medium">{t("language")}</span>
             <Select
               value={language}
-              className="w-50 max-w-75"
+              className="tw-w-50 tw-max-w-75"
               onChange={(value) => {
                 if (value === "help") {
                   window.open("https://crowdin.com/project/scriptcat", "_blank");
@@ -82,14 +82,14 @@ function Setting() {
               ))}
             </Select>
           </div>
-          <span className="text-xs ml-6 flex-shrink-0">{t("select_interface_language")}</span>
+          <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("select_interface_language")}</span>
         </div>
       </Card>
 
       {/* 脚本同步 */}
       <Card className="sync" title={t("script_sync")} bordered={false}>
-        <Space direction="vertical" className={"w-full"}>
-          <Space direction="horizontal" className={"w-full"}>
+        <Space direction="vertical" className="tw-w-full">
+          <Space direction="horizontal" className="tw-w-full">
             <Checkbox
               checked={cloudSync.syncDelete}
               onChange={(checked) => {
@@ -158,17 +158,17 @@ function Setting() {
 
       {/* 界面外观 */}
       <Card title={t("interface_settings")} bordered={false}>
-        <Space direction="vertical" size={16} className="w-full">
+        <Space direction="vertical" size={16} className="tw-w-full">
           {/* 扩展图标徽标 */}
           <div>
-            <div className="text-sm font-medium mb-3">{t("extension_icon_badge")}</div>
-            <Space direction="vertical" size={12} className="w-full">
-              <div className="flex items-center justify-between min-h-9">
-                <div className="flex items-center gap-4 flex-1">
-                  <span className="min-w-20">{t("display_type")}</span>
+            <div className="tw-text-sm tw-font-medium tw-mb-3">{t("extension_icon_badge")}</div>
+            <Space direction="vertical" size={12} className="tw-w-full">
+              <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+                <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+                  <span className="tw-min-w-20">{t("display_type")}</span>
                   <Select
                     value={badgeNumberType}
-                    className="w-40 max-w-50"
+                    className="tw-w-40 tw-max-w-50"
                     onChange={(value) => {
                       submitBadgeNumberType(value);
                     }}
@@ -178,11 +178,11 @@ function Setting() {
                     <Select.Option value="script_count">{t("badge_type_script_count")}</Select.Option>
                   </Select>
                 </div>
-                <span className="text-xs ml-6 flex-shrink-0">{t("extension_icon_badge_type")}</span>
+                <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("extension_icon_badge_type")}</span>
               </div>
-              <div className="flex items-center justify-between min-h-9">
-                <div className="flex items-center gap-4 flex-1">
-                  <span className="min-w-20">{t("background_color")}</span>
+              <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+                <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+                  <span className="tw-min-w-20">{t("background_color")}</span>
                   <ColorPicker
                     value={badgeBackgroundColor}
                     onChange={(value) => {
@@ -191,14 +191,14 @@ function Setting() {
                     }}
                     showText
                     disabledAlpha
-                    className="w-50 max-w-62.5"
+                    className="tw-w-50 tw-max-w-62.5"
                   />
                 </div>
-                <span className="text-xs ml-6 flex-shrink-0">{t("badge_background_color_desc")}</span>
+                <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("badge_background_color_desc")}</span>
               </div>
-              <div className="flex items-center justify-between min-h-9">
-                <div className="flex items-center gap-4 flex-1">
-                  <span className="min-w-20">{t("text_color")}</span>
+              <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+                <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+                  <span className="tw-min-w-20">{t("text_color")}</span>
                   <ColorPicker
                     value={badgeTextColor}
                     onChange={(value) => {
@@ -207,20 +207,20 @@ function Setting() {
                     }}
                     showText
                     disabledAlpha
-                    className="w-50 max-w-62.5"
+                    className="tw-w-50 tw-max-w-62.5"
                   />
                 </div>
-                <span className="text-xs ml-6 flex-shrink-0">{t("badge_text_color_desc")}</span>
+                <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("badge_text_color_desc")}</span>
               </div>
             </Space>
           </div>
 
           {/* 脚本菜单 */}
           <div>
-            <div className="text-sm font-medium mb-3">{t("script_menu")}</div>
-            <Space direction="vertical" size={12} className={"w-full"}>
-              <div className="flex items-center justify-between min-h-9">
-                <div className="flex items-center gap-4 flex-1">
+            <div className="tw-text-sm tw-font-medium tw-mb-3">{t("script_menu")}</div>
+            <Space direction="vertical" size={12} className="tw-w-full">
+              <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+                <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
                   <Checkbox
                     checked={scriptMenuDisplayType === "all"}
                     onChange={(e) => {
@@ -231,13 +231,13 @@ function Setting() {
                     {t("display_right_click_menu")}
                   </Checkbox>
                 </div>
-                <span className="text-xs ml-6 flex-shrink-0">{t("display_right_click_menu_desc")}</span>
+                <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("display_right_click_menu_desc")}</span>
               </div>
-              <div className="flex items-center justify-between min-h-9">
-                <div className="flex items-center gap-4 flex-1">
-                  <span className="min-w-20">{t("expand_count")}</span>
+              <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+                <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+                  <span className="tw-min-w-20">{t("expand_count")}</span>
                   <Input
-                    className="w-25 max-w-30"
+                    className="tw-w-25 tw-max-w-30"
                     type="number"
                     value={menuExpandNum.toString()}
                     onChange={(val) => {
@@ -246,7 +246,7 @@ function Setting() {
                     }}
                   />
                 </div>
-                <span className="text-xs ml-6 flex-shrink-0">{t("auto_collapse_when_exceeds")}</span>
+                <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("auto_collapse_when_exceeds")}</span>
               </div>
             </Space>
           </div>
@@ -255,13 +255,13 @@ function Setting() {
 
       {/* 脚本更新设置 */}
       <Card title={t("update")} bordered={false}>
-        <Space direction="vertical" size={20} className="w-full">
-          <div className="flex items-center justify-between min-h-9">
-            <div className="flex items-center gap-4 flex-1">
-              <span className="min-w-20 font-medium">{t("script_update_check_frequency")}</span>
+        <Space direction="vertical" size={20} className="tw-w-full">
+          <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+            <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
+              <span className="tw-min-w-20 tw-font-medium">{t("script_update_check_frequency")}</span>
               <Select
                 value={checkScriptUpdateCycle.toString()}
-                className="w-35 max-w-45"
+                className="tw-w-35 tw-max-w-45"
                 onChange={(value) => {
                   const num = parseInt(value, 10);
                   submitCheckScriptUpdateCycle(num);
@@ -277,12 +277,12 @@ function Setting() {
                 <Select.Option value="604800">{t("every_week")}</Select.Option>
               </Select>
             </div>
-            <span className="text-xs ml-6 flex-shrink-0">{t("script_auto_update_frequency")}</span>
+            <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("script_auto_update_frequency")}</span>
           </div>
 
-          <div className="flex items-start justify-between">
-            <div className="flex flex-col gap-3 flex-1">
-              <span className="font-medium mb-1">{t("update_options")}</span>
+          <div className="tw-flex tw-items-start tw-justify-between">
+            <div className="tw-flex tw-flex-col tw-gap-3 tw-flex-1">
+              <span className="tw-font-medium tw-mb-1">{t("update_options")}</span>
               <Checkbox
                 onChange={(checked) => {
                   submitUpdateDisableScript(checked);
@@ -300,7 +300,7 @@ function Setting() {
                 {t("silent_update_non_critical_changes")}
               </Checkbox>
             </div>
-            <span className="text-xs max-w-50 text-right ml-6 flex-shrink-0">
+            <span className="tw-text-xs tw-max-w-50 tw-text-right tw-ml-6 tw-flex-shrink-0">
               {t("control_script_update_behavior")}
             </span>
           </div>
@@ -310,9 +310,9 @@ function Setting() {
       {/* 安全设置 */}
       <Card title={t("security")} bordered={false}>
         <div>
-          <div className="flex items-start justify-between mb-3">
-            <span className="font-medium min-w-20">{t("blacklist_pages")}</span>
-            <span className="text-xs max-w-60 text-right">{t("blacklist_pages_desc")}</span>
+          <div className="tw-flex tw-items-start tw-justify-between tw-mb-3">
+            <span className="tw-font-medium tw-min-w-20">{t("blacklist_pages")}</span>
+            <span className="tw-text-xs tw-max-w-60 tw-text-right">{t("blacklist_pages_desc")}</span>
           </div>
           <Input.TextArea
             placeholder={t("blacklist_placeholder")}
@@ -340,34 +340,34 @@ function Setting() {
       </Card>
       {/* 开发工具 */}
       <Card title={t("development_tools")} bordered={false}>
-        <Space direction="vertical" size={20} className={"w-full"}>
-          <div className="flex items-center justify-between min-h-9">
-            <div className="flex items-center gap-4 flex-1">
+        <Space direction="vertical" size={20} className="tw-w-full">
+          <div className="tw-flex tw-items-center tw-justify-between tw-min-h-9">
+            <div className="tw-flex tw-items-center tw-gap-4 tw-flex-1">
               <Checkbox
                 onChange={(checked) => {
                   submitEnableEslint(checked);
                 }}
                 checked={enableEslint}
               >
-                <span className="font-medium">{t("enable_eslint")}</span>
+                <span className="tw-font-medium">{t("enable_eslint")}</span>
               </Checkbox>
               <Button
                 type="text"
                 size="small"
-                className="p-1"
+                className="tw-p-1"
                 icon={<IconQuestionCircleFill />}
                 href="https://eslint.org/play/"
                 target="_blank"
               />
             </div>
-            <span className="text-xs ml-6 flex-shrink-0">{t("check_script_code_quality")}</span>
+            <span className="tw-text-xs tw-ml-6 tw-flex-shrink-0">{t("check_script_code_quality")}</span>
           </div>
 
           {enableEslint && (
             <div>
-              <div className="flex items-start justify-between mb-3">
-                <span className="font-medium min-w-20">{t("eslint_rules")}</span>
-                <span className="text-xs max-w-60 text-right ml-6 flex-shrink-0">
+              <div className="tw-flex tw-items-start tw-justify-between tw-mb-3">
+                <span className="tw-font-medium tw-min-w-20">{t("eslint_rules")}</span>
+                <span className="tw-text-xs tw-max-w-60 tw-text-right tw-ml-6 tw-flex-shrink-0">
                   {t("custom_eslint_rules_config")}
                 </span>
               </div>
@@ -403,10 +403,10 @@ function Setting() {
             </div>
           )}
           <div>
-            <div className="flex items-start justify-between mb-3">
-              <span className="font-medium min-w-20">{t("editor_config")}</span>
+            <div className="tw-flex tw-items-start tw-justify-between tw-mb-3">
+              <span className="tw-font-medium tw-min-w-20">{t("editor_config")}</span>
               <CustomTrans
-                className="text-xs max-w-80 text-right ml-6 flex-shrink-0"
+                className="tw-text-xs tw-max-w-80 tw-text-right tw-ml-6 tw-flex-shrink-0"
                 i18nKey="editor_config_description"
               />
             </div>
@@ -441,10 +441,10 @@ function Setting() {
             />
           </div>
           <div>
-            <div className="flex items-start justify-between mb-3">
-              <span className="font-medium min-w-20">{t("editor_type_definition")}</span>
+            <div className="tw-flex tw-items-start tw-justify-between tw-mb-3">
+              <span className="tw-font-medium tw-min-w-20">{t("editor_type_definition")}</span>
               <span
-                className="text-xs max-w-100 text-right ml-6 flex-shrink-0"
+                className="tw-text-xs tw-max-w-100 tw-text-right tw-ml-6 tw-flex-shrink-0"
                 dangerouslySetInnerHTML={{
                   __html: t("editor_type_definition_description"),
                 }}
diff --git a/src/pages/options/routes/SubscribeList.tsx b/src/pages/options/routes/SubscribeList.tsx
index 8643f564b..f2e376bd1 100644
--- a/src/pages/options/routes/SubscribeList.tsx
+++ b/src/pages/options/routes/SubscribeList.tsx
@@ -130,7 +130,7 @@ function SubscribeList() {
           setTimeout(() => inputRef.current!.focus(), 1);
         }
       },
-      className: "max-w-[240px]",
+      className: "tw-max-w-[240px]",
       render: (col) => {
         return (
           <Tooltip content={col} position="tl">
diff --git a/src/pages/options/routes/Tools.tsx b/src/pages/options/routes/Tools.tsx
index 6c0ddcd84..11f3fb371 100644
--- a/src/pages/options/routes/Tools.tsx
+++ b/src/pages/options/routes/Tools.tsx
@@ -158,7 +158,7 @@ function Tools() {
             <Drawer
               width={400}
               title={
-                <div className="flex flex-row justify-between w-full gap-10">
+                <div className="tw-flex tw-flex-row tw-justify-between tw-w-full tw-gap-10">
                   <span>{t("backup_list")}</span>
                   <Button
                     type="secondary"
@@ -194,7 +194,7 @@ function Tools() {
                 render={(item: File) => (
                   <List.Item key={`${item.name}_${item.updatetime}`}>
                     <List.Item.Meta title={item.name} description={formatUnixTime(item.updatetime / 1000)} />
-                    <Space className="w-full justify-end">
+                    <Space className="tw-w-full tw-justify-end">
                       <Button
                         type="primary"
                         size="small"
diff --git a/src/pages/options/routes/script/ScriptEditor.tsx b/src/pages/options/routes/script/ScriptEditor.tsx
index 2d7ac31cd..1a5d1c12f 100644
--- a/src/pages/options/routes/script/ScriptEditor.tsx
+++ b/src/pages/options/routes/script/ScriptEditor.tsx
@@ -704,7 +704,7 @@ function ScriptEditor() {
 
   return (
     <div
-      className="h-full flex flex-col"
+      className="tw-h-full tw-flex tw-flex-col"
       style={{
         position: "relative",
         left: -10,
@@ -749,13 +749,13 @@ function ScriptEditor() {
         </>
       )}
       <div
-        className="h-6"
+        className="tw-h-6"
         style={{
           borderBottom: "1px solid var(--color-neutral-3)",
           background: "var(--color-secondary)",
         }}
       >
-        <div className="flex flex-row">
+        <div className="tw-flex tw-flex-row">
           {menu.map((item, index) => {
             if (!item.items) {
               // 没有子菜单
@@ -866,7 +866,7 @@ function ScriptEditor() {
         </div>
       </div>
       <Row
-        className="flex flex-grow flex-1"
+        className="tw-flex tw-flex-grow tw-flex-1"
         style={{
           overflow: "hidden",
         }}
@@ -874,20 +874,20 @@ function ScriptEditor() {
         {!hiddenScriptList && (
           <Col
             span={4}
-            className="h-full"
+            className="tw-h-full"
             style={{
               overflowY: "scroll",
             }}
           >
             <div
-              className="flex flex-col"
+              className="tw-flex tw-flex-col"
               style={{
                 backgroundColor: "var(--color-secondary)",
                 overflow: "hidden",
               }}
             >
               <Button
-                className="text-left"
+                className="tw-text-left"
                 size="mini"
                 style={{
                   color: "var(--color-text-2)",
@@ -905,7 +905,7 @@ function ScriptEditor() {
                   );
                 }}
               >
-                <div className="flex justify-between items-center">
+                <div className="tw-flex tw-justify-between tw-items-center">
                   {t("installed_scripts")}
                   <IconSearch
                     style={{
@@ -915,7 +915,7 @@ function ScriptEditor() {
                 </div>
               </Button>
               {showSearchInput && (
-                <div className="p-2">
+                <div className="tw-p-2">
                   <Input
                     placeholder={t("search_scripts")}
                     allowClear
@@ -934,14 +934,14 @@ function ScriptEditor() {
                 .map((script) => (
                   <div
                     key={`s_${script.uuid}`}
-                    className="relative group"
+                    className="tw-relative group"
                     style={{
                       overflow: "hidden",
                     }}
                   >
                     <Button
                       size="mini"
-                      className="text-left w-full"
+                      className="tw-text-left tw-w-full"
                       style={{
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -980,7 +980,7 @@ function ScriptEditor() {
                         }
                       }}
                     >
-                      <span className="overflow-hidden text-ellipsis">{i18nName(script)}</span>
+                      <span className="tw-overflow-hidden tw-text-ellipsis">{i18nName(script)}</span>
                     </Button>
                     {/* 删除按钮，只在鼠标悬停时显示 */}
                     <Button
@@ -988,7 +988,7 @@ function ScriptEditor() {
                       icon={<IconDelete />}
                       iconOnly
                       size="mini"
-                      className="absolute right-1 top-1/2 transform -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                      className="tw-absolute tw-right-1 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-duration-200"
                       style={{
                         width: "20px",
                         height: "20px",
@@ -1028,7 +1028,7 @@ function ScriptEditor() {
             </div>
           </Col>
         )}
-        <Col span={hiddenScriptList ? 24 : 20} className="flex! flex-col h-full">
+        <Col span={hiddenScriptList ? 24 : 20} className="tw-flex! tw-flex-col tw-h-full">
           <Tabs
             editable
             activeTab={activeTab}
@@ -1118,14 +1118,14 @@ function ScriptEditor() {
               />
             ))}
           </Tabs>
-          <div className="flex flex-grow flex-1">
+          <div className="tw-flex tw-flex-grow tw-flex-1 tw-relative">
             {editors.map((item) => {
               if (item.active) {
                 document.title = `${i18nName(item.script)} - Script Editor`;
               }
               return (
                 <div
-                  className="w-full"
+                  className="tw-w-full tw-absolute sc-inset-0"
                   key={`fe_${item.script.uuid}`}
                   style={{
                     display: item.active ? "block" : "none",
diff --git a/src/pages/popup/App.tsx b/src/pages/popup/App.tsx
index deb0ffde9..039c34eb8 100644
--- a/src/pages/popup/App.tsx
+++ b/src/pages/popup/App.tsx
@@ -386,12 +386,12 @@ function App() {
       <Card
         size="small"
         title={
-          <div className="flex justify-between">
-            <div className="text-xl inline-flex flex-row items-center gap-x-1">
+          <div className="tw-flex tw-justify-between">
+            <div className="tw-text-xl tw-inline-flex tw-flex-row tw-items-center tw-gap-x-1">
               <span>{"ScriptCat"}</span>
             </div>
-            <div className="flex flex-row items-center">
-              <Switch size="small" className="mr-1" checked={isEnableScript} onChange={handleEnableScriptChange} />
+            <div className="tw-flex tw-flex-row tw-items-center">
+              <Switch size="small" className="tw-mr-1" checked={isEnableScript} onChange={handleEnableScriptChange} />
               <Button type="text" icon={<IconSettings />} iconOnly onClick={handleSettingsClick} />
               <Badge count={checkUpdate.isRead ? 0 : 1} dot offset={[-8, 6]}>
                 <Button type="text" icon={<IconNotification />} iconOnly onClick={handleNotificationClick} />
@@ -418,37 +418,43 @@ function App() {
                     }}
                     onClickMenuItem={handleMenuClick}
                   >
-                    <Menu.Item key="newScript" className="flex flex-row items-center">
+                    <Menu.Item key="newScript" className="tw-flex tw-flex-row tw-items-center">
                       <IconPlus style={iconStyle} />
                       {t("create_script")}
                     </Menu.Item>
                     <Menu.Item
                       key={`https://scriptcat.org/search?domain=${urlHost}`}
-                      className="flex flex-row items-center"
+                      className="tw-flex tw-flex-row tw-items-center"
                     >
                       <IconSearch style={iconStyle} />
                       {t("get_script")}
                     </Menu.Item>
-                    <Menu.Item key={"checkUpdate"} className="flex flex-row items-center">
+                    <Menu.Item key={"checkUpdate"} className="tw-flex tw-flex-row tw-items-center">
                       <IconSync style={iconStyle} />
                       {t("check_update")}
                     </Menu.Item>
-                    <Menu.Item key="report_issue" className="flex flex-row items-center">
+                    <Menu.Item key="report_issue" className="tw-flex tw-flex-row tw-items-center">
                       <IconBug style={iconStyle} />
                       {t("report_issue")}
                     </Menu.Item>
-                    <Menu.Item key={`${DocumentationSite}${localePath}`} className="flex flex-row items-center">
+                    <Menu.Item
+                      key={`${DocumentationSite}${localePath}`}
+                      className="tw-flex tw-flex-row tw-items-center"
+                    >
                       <IconBook style={iconStyle} />
                       {t("project_docs")}
                     </Menu.Item>
                     <Menu.Item
                       key={isChineseUser() ? "https://bbs.tampermonkey.net.cn/" : Discord}
-                      className="flex flex-row items-center"
+                      className="tw-flex tw-flex-row tw-items-center"
                     >
                       <RiMessage2Line style={iconStyle} />
                       {t("community")}
                     </Menu.Item>
-                    <Menu.Item key="https://github.com/scriptscat/scriptcat" className="flex flex-row items-center">
+                    <Menu.Item
+                      key="https://github.com/scriptscat/scriptcat"
+                      className="tw-flex tw-flex-row tw-items-center"
+                    >
                       <IconGithub style={iconStyle} />
                       {"GitHub"}
                     </Menu.Item>
@@ -508,14 +514,14 @@ function App() {
             />
           </CollapseItem>
         </Collapse>
-        <div className="flex flex-row arco-card-header !h-6">
+        <div className="tw-flex tw-flex-row arco-card-header !tw-h-6">
           {versionCompare(ExtVersion, checkUpdate.version) === VersionCompare.LESS ? (
             <Tooltip content={`${t("popup.new_version_available")} (v${checkUpdate.version})`}>
               <span
                 onClick={() => {
                   window.open(`https://github.com/scriptscat/scriptcat/releases/tag/v${checkUpdate.version}`);
                 }}
-                className={`text-[12px] font-500 cursor-pointer underline underline-offset-2 text-blue-500 dark:text-blue-400`}
+                className={`tw-text-[12px] tw-font-500 tw-cursor-pointer tw-underline tw-underline-offset-2 tw-text-blue-500 dark:tw-text-blue-400`}
               >{`v${ExtVersion}`}</span>
             </Tooltip>
           ) : checkUpdateStatus === 0 ? (
@@ -524,12 +530,12 @@ function App() {
                 onClick={() => {
                   setCheckUpdateStatus(1);
                 }}
-                className="text-[12px] font-500 cursor-pointer hover:underline hover:underline-offset-2"
+                className="tw-text-[12px] tw-font-500 tw-cursor-pointer hover:tw-underline hover:tw-underline-offset-2"
               >{`v${ExtVersion}`}</span>
             </Tooltip>
           ) : checkUpdateStatus === 1 ? (
             <Tooltip content={t("checking_for_updates")}>
-              <span className="text-[12px] font-500">{`${t("checking_for_updates")}`}</span>
+              <span className="tw-text-[12px] tw-font-500">{`${t("checking_for_updates")}`}</span>
             </Tooltip>
           ) : checkUpdateStatus === 2 ? (
             <Tooltip content={t("latest_version")}>
@@ -537,7 +543,7 @@ function App() {
                 onClick={() => {
                   setCheckUpdateStatus(1);
                 }}
-                className="text-[12px] font-500 cursor-pointer hover:underline hover:underline-offset-2"
+                className="tw-text-[12px] tw-font-500 tw-cursor-pointer hover:tw-underline hover:tw-underline-offset-2"
               >{`${t("latest_version")}`}</span>
             </Tooltip>
           ) : (
diff --git a/uno.config.ts b/uno.config.ts
index 903cb0088..abd7777fe 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,8 +1,13 @@
-import { defineConfig, presetUno } from "unocss";
+import { defineConfig, presetWind3 } from "unocss";
 
 export default defineConfig({
   content: {
     filesystem: ["./src/**/*.{html,js,ts,jsx,tsx}"],
   },
-  presets: [presetUno({ dark: "class" })],
+  presets: [
+    presetWind3({
+      dark: "class",
+      prefix: "tw-",
+    }),
+  ],
 });