diff --git a/web3/apps/web/src/main.ts b/web3/apps/web/src/main.ts
index d771559e..a1b9c09f 100644
--- a/web3/apps/web/src/main.ts
+++ b/web3/apps/web/src/main.ts
@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
+// 导入Tailwind CSS样式
+import './assets/index.css'
 
 // 创建应用实例
 const app = createApp(App)
diff --git a/web3/apps/web/src/views/Home.vue b/web3/apps/web/src/views/Home.vue
index 8da5dcf5..d08bac2b 100644
--- a/web3/apps/web/src/views/Home.vue
+++ b/web3/apps/web/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="home">
-    <h1 class="title flex">思维导图演示</h1>
-    <div class="mind-map-container">
+  <div class="home min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
+    <h1 class="title text-3xl font-bold text-center text-gray-800 mb-8">思维导图演示</h1>
+    <div class="mind-map-container bg-white rounded-lg shadow-lg p-4 h-[80vh]">
       <MindMap />
     </div>
   </div>
@@ -15,8 +15,4 @@ import { MindMap } from '@mind-map/component';
 onMounted(() => {
   console.log('Home view mounted');
 });
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/web3/packages/mind-map/src/styles/index.css b/web3/packages/mind-map/src/styles/index.css
index b5c88904..b031eecc 100644
--- a/web3/packages/mind-map/src/styles/index.css
+++ b/web3/packages/mind-map/src/styles/index.css
@@ -1,164 +1,18 @@
+@import "./theme.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 *{
-    
-}
-
-@layer base {
-  *,
-  ::after,
-  ::before {
-    @apply border-border;
-
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  html {
-    @apply text-foreground bg-background font-sans text-[100%];
-
-    font-variation-settings: normal;
-    line-height: 1.15;
-    text-size-adjust: 100%;
-    font-synthesis-weight: none;
-    scroll-behavior: smooth;
-    text-rendering: optimizelegibility;
-    -webkit-tap-highlight-color: transparent;
-
-    /* -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale; */
-  }
-
-  #app,
-  body,
-  html {
-    @apply size-full;
-
-    /* scrollbar-gutter: stable; */
-  }
-
-  body {
-    min-height: 100vh;
-
-    /* pointer-events: auto !important; */
-
-    /* overflow: overlay; */
-
-    /* -webkit-font-smoothing: antialiased; */
-
-    /* -moz-osx-font-smoothing: grayscale; */
-  }
-
-  a,
-  a:active,
-  a:hover,
-  a:link,
-  a:visited {
-    @apply no-underline;
-  }
-
-  ::view-transition-new(root),
-  ::view-transition-old(root) {
-    @apply animate-none mix-blend-normal;
-  }
-
-  ::view-transition-old(root) {
-    @apply z-[1];
-  }
-
-  ::view-transition-new(root) {
-    @apply z-[2147483646];
-  }
-
-  html.dark::view-transition-old(root) {
-    @apply z-[2147483646];
-  }
-
-  html.dark::view-transition-new(root) {
-    @apply z-[1];
-  }
-
-  input::placeholder,
-  textarea::placeholder {
-    @apply opacity-100;
-  }
-
-  /* input:-webkit-autofill {
-    @apply border-none;
-
-    box-shadow: 0 0 0 1000px transparent inset;
-  } */
-
-  input[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    @apply m-0 appearance-none;
-  }
-
-  /* 只有非mac下才进行调整，mac下使用默认滚动条 */
-  html:not([data-platform='macOs']) {
-    ::-webkit-scrollbar {
-      @apply h-[10px] w-[10px];
-    }
-
-    ::-webkit-scrollbar-thumb {
-      @apply bg-border rounded-sm border-none;
-    }
-
-    ::-webkit-scrollbar-track {
-      @apply rounded-sm border-none bg-transparent shadow-none;
-    }
-
-    ::-webkit-scrollbar-button {
-      @apply hidden;
-    }
-  }
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: var(--foreground);
+    background-color: var(--background);
+    border-color: var(--border);
 }
 
-@layer components {
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
-
-  .flex-col-center {
-    @apply flex flex-col items-center justify-center;
-  }
-
-  .outline-box {
-    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
-  }
-
-  .outline-box::after {
-    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
-  }
-
-  .outline-box.outline-box-active {
-    @apply outline-primary outline outline-2;
-  }
-
-  .outline-box.outline-box-active::after {
-    display: none;
-  }
-
-  .outline-box:not(.outline-box-active):hover::after {
-    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
-  }
-
-  .vben-link {
-    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
-  }
-
-  .card-box {
-    @apply bg-card text-card-foreground border-border rounded-xl border;
-  }
-}
-
-html.invert-mode {
-  @apply invert;
-}
-
-html.grayscale-mode {
-  @apply grayscale;
-}
diff --git a/web3/packages/mind-map/tailwind.config.ts b/web3/packages/mind-map/tailwind.config.ts
index de79ee01..487700c6 100644
--- a/web3/packages/mind-map/tailwind.config.ts
+++ b/web3/packages/mind-map/tailwind.config.ts
@@ -6,7 +6,45 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: "rgb(var(--border) / <alpha-value>)",
+        input: "rgb(var(--input) / <alpha-value>)",
+        ring: "rgb(var(--ring) / <alpha-value>)",
+        background: "rgb(var(--background) / <alpha-value>)",
+        foreground: "rgb(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "rgb(var(--primary) / <alpha-value>)",
+          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
+          hover: "rgb(var(--primary-hover) / <alpha-value>)",
+          active: "rgb(var(--primary-active) / <alpha-value>)",
+        },
+        secondary: {
+          DEFAULT: "rgb(var(--secondary) / <alpha-value>)",
+          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
+        },
+        destructive: {
+          DEFAULT: "rgb(var(--destructive) / <alpha-value>)",
+          foreground: "rgb(var(--destructive-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "rgb(var(--muted) / <alpha-value>)",
+          foreground: "rgb(var(--muted-foreground) / <alpha-value>)",
+        },
+        accent: {
+          DEFAULT: "rgb(var(--accent) / <alpha-value>)",
+          foreground: "rgb(var(--accent-foreground) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "rgb(var(--popover) / <alpha-value>)",
+          foreground: "rgb(var(--popover-foreground) / <alpha-value>)",
+        },
+        card: {
+          DEFAULT: "rgb(var(--card) / <alpha-value>)",
+          foreground: "rgb(var(--card-foreground) / <alpha-value>)",
+        },
+      },
+    },
   },
   plugins: [],
 } satisfies Config