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

2025-12-14 20:31:52 +07:00
parent 3b13a23982
commit 9d6bceb6cd
6 changed files with 69 additions and 67 deletions
--- a/tailwind.config.ts
+++ b/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;