feat: 添加 Tailwind CSS 配置并优化组件样式

src/theme/index.css

@@ -1 +1,2 @@
 @import "tailwindcss";
+@config "../../tailwind.config.ts";

src/views/user/components/recharge-channel.vue

@@ -12,27 +12,27 @@ async function handleFiatRecharge() {
 </script>
 
 <template>
-  <div class="w-full h-200px p-20px flex justify-center flex-col gap-30px">
+  <div class="w-full h-50 p-5 flex justify-center flex-col gap-7.5">
-    <div class="flex items-center gap-10px">
+    <div class="flex items-center gap-2.5">
       <i-ic-baseline-downloading class="text-2xl" />
       <ion-label class="flex-1">
         <h2>Chain recharge</h2>
-        <p class="w-80% text-sm">
+        <p class="w-[80%] text-sm">
           Transfer crypto from on-chain wallet or exchange.
         </p>
       </ion-label>
-      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+      <i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
     </div>
 
-    <div class="flex items-center gap-10px" @click="handleFiatRecharge">
+    <div class="flex items-center gap-2.5" @click="handleFiatRecharge">
       <i-ic-baseline-data-saver-off class="text-2xl" />
       <ion-label class="flex-1">
         <h2>Fiat currency</h2>
-        <p class="w-80% text-sm">
+        <p class="w-[80%] text-sm">
           Transfer fiat currency through bank or other financial institutions.
         </p>
       </ion-label>
-      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+      <i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
     </div>
   </div>
 </template>

src/views/withdraw/index.vue

@@ -66,7 +66,7 @@ async function onSubmit() {
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
-      <div class="flex flex-col gap-20px">
+      <div class="flex flex-col gap-5">
         <ion-radio-group v-model="form.assetCode" @ion-change="handleCurrentChange">
           <ion-label class="text-sm">
             Choose Currency

tailwind.config.ts

@@ -0,0 +1,59 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "var(--ion-color-primary)",
+        secondary: "var(--ion-color-secondary)",
+        tertiary: "var(--ion-color-tertiary)",
+        success: "var(--ion-color-success)",
+        warning: "var(--ion-color-warning)",
+        danger: "var(--ion-color-danger)",
+        light: "var(--ion-color-light)",
+        medium: "var(--ion-color-medium)",
+        dark: "var(--ion-color-dark)",
+        text: {
+          50: "var(--ion-text-color-step-50)",
+          100: "var(--ion-text-color-step-100)",
+          150: "var(--ion-text-color-step-150)",
+          200: "var(--ion-text-color-step-200)",
+          250: "var(--ion-text-color-step-250)",
+          300: "var(--ion-text-color-step-300)",
+          350: "var(--ion-text-color-step-350)",
+          400: "var(--ion-text-color-step-400)",
+          450: "var(--ion-text-color-step-450)",
+          500: "var(--ion-text-color-step-500)",
+          550: "var(--ion-text-color-step-550)",
+          600: "var(--ion-text-color-step-600)",
+          650: "var(--ion-text-color-step-650)",
+          700: "var(--ion-text-color-step-700)",
+          750: "var(--ion-text-color-step-750)",
+          800: "var(--ion-text-color-step-800)",
+          850: "var(--ion-text-color-step-850)",
+          900: "var(--ion-text-color-step-900)",
+        },
+      },
+    },
+  },
+  plugins: [
+    function ({ addUtilities }) {
+      addUtilities({
+        ".flex-center": {
+          "display": "flex",
+          "align-items": "center",
+          "justify-content": "center",
+        },
+        ".flex-col-center": {
+          "display": "flex",
+          "flex-direction": "column",
+          "align-items": "center",
+          "justify-content": "center",
+        },
+      });
+    },
+  ],
+};
+
+export default config;

tsconfig.node.json

@@ -10,5 +10,5 @@
     },
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "tailwind.config.ts"]
 }

uno.config.ts

@@ -1,58 +0,0 @@
-import { presetWind4 } from "@unocss/preset-wind4";
-import {
-  defineConfig,
-  presetIcons,
-  transformerDirectives,
-  transformerVariantGroup,
-} from "unocss";
-
-export default defineConfig({
-  presets: [
-    presetWind4(),
-    presetIcons(),
-  ],
-  transformers: [
-    transformerDirectives({
-      applyVariable: ["--at-apply", "--uno-apply", "--uno"],
-    }),
-    transformerVariantGroup(),
-  ],
-  shortcuts: {
-    "flex-center": "flex items-center justify-center",
-    "flex-col-center": "flex flex-col items-center justify-center",
-  },
-  // 为 Ionic 添加 CSS 变量支持
-  theme: {
-    colors: {
-      primary: "var(--ion-color-primary)",
-      secondary: "var(--ion-color-secondary)",
-      tertiary: "var(--ion-color-tertiary)",
-      success: "var(--ion-color-success)",
-      warning: "var(--ion-color-warning)",
-      danger: "var(--ion-color-danger)",
-      light: "var(--ion-color-light)",
-      medium: "var(--ion-color-medium)",
-      dark: "var(--ion-color-dark)",
-      text: {
-        50: "var(--ion-text-color-step-50)",
-        100: "var(--ion-text-color-step-100)",
-        150: "var(--ion-text-color-step-150)",
-        200: "var(--ion-text-color-step-200)",
-        250: "var(--ion-text-color-step-250)",
-        300: "var(--ion-text-color-step-300)",
-        350: "var(--ion-text-color-step-350)",
-        400: "var(--ion-text-color-step-400)",
-        450: "var(--ion-text-color-step-450)",
-        500: "var(--ion-text-color-step-500)",
-        550: "var(--ion-text-color-step-550)",
-        600: "var(--ion-text-color-step-600)",
-        650: "var(--ion-text-color-step-650)",
-        700: "var(--ion-text-color-step-700)",
-        750: "var(--ion-text-color-step-750)",
-        800: "var(--ion-text-color-step-800)",
-        850: "var(--ion-text-color-step-850)",
-        900: "var(--ion-text-color-step-900)",
-      },
-    },
-  },
-});