diff --git a/.vscode/settings.json b/.vscode/settings.json
index ad1268dab..d024edd07 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "tailwindCSS.experimental.configFile": "packages/@core/base/design/src/css/global.css",
+  "tailwindCSS.experimental.configFile": "internal/tailwind-config/src/theme.css",
   "tailwindCSS.lint.suggestCanonicalClasses": "ignore",
   // workbench
   "workbench.list.smoothScrolling": true,
diff --git a/internal/lint-configs/eslint-config/src/configs/node.ts b/internal/lint-configs/eslint-config/src/configs/node.ts
index 721bd5a0a..95d998673 100644
--- a/internal/lint-configs/eslint-config/src/configs/node.ts
+++ b/internal/lint-configs/eslint-config/src/configs/node.ts
@@ -18,6 +18,7 @@ export async function node(): Promise<Linter.Config[]> {
           {
             allowModules: [
               'tsdown',
+              'unplugin-vue',
               '@vben/vite-config',
               'vitest',
               'vite',
diff --git a/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts b/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts
index c24e5c865..5e7bff5ab 100644
--- a/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts
+++ b/internal/lint-configs/oxlint-config/src/configs/tailwindcss.ts
@@ -14,7 +14,7 @@ const selectors = [
 ];
 
 const settings = {
-  entryPoint: 'packages/@core/base/design/src/css/global.css',
+  entryPoint: 'internal/tailwind-config/src/theme.css',
   selectors,
 };
 
diff --git a/internal/node-utils/scripts/build.mjs b/internal/node-utils/scripts/build.mjs
index c38b4914c..65a64e9c4 100644
--- a/internal/node-utils/scripts/build.mjs
+++ b/internal/node-utils/scripts/build.mjs
@@ -1,8 +1,7 @@
 import { spawnSync } from 'node:child_process';
 
 const pnpmCommand =
-  process.env.npm_execpath &&
-  process.env.npm_execpath.endsWith('.cjs')
+  process.env.npm_execpath && process.env.npm_execpath.endsWith('.cjs')
     ? [process.execPath, process.env.npm_execpath]
     : ['pnpm'];
 
@@ -22,7 +21,11 @@ const steps = [
 
 for (const args of steps) {
   const [command, ...commandArgs] = pnpmCommand;
-  const result = spawnSync(command, [...commandArgs, ...args], {
+  let cmd = command;
+  if (cmd.includes(' ')) {
+    cmd = `"${command}"`;
+  }
+  const result = spawnSync(cmd, [...commandArgs, ...args], {
     shell: true,
     stdio: 'inherit',
   });
diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json
new file mode 100644
index 000000000..6701907c7
--- /dev/null
+++ b/internal/tailwind-config/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@vben/tailwind-config",
+  "version": "5.7.0",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/tailwind-config"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./theme": {
+      "default": "./src/theme.css"
+    }
+  },
+  "dependencies": {
+    "@iconify/tailwind4": "catalog:",
+    "@tailwindcss/typography": "catalog:",
+    "tailwindcss": "catalog:",
+    "tw-animate-css": "catalog:"
+  }
+}
diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts
new file mode 100644
index 000000000..5b1d5b4cf
--- /dev/null
+++ b/internal/tailwind-config/src/index.ts
@@ -0,0 +1 @@
+import './theme.css';
diff --git a/internal/tailwind-config/src/theme.css b/internal/tailwind-config/src/theme.css
new file mode 100644
index 000000000..c212dc66e
--- /dev/null
+++ b/internal/tailwind-config/src/theme.css
@@ -0,0 +1,569 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@plugin '@tailwindcss/typography';
+@plugin '@iconify/tailwind4';
+
+/* Monorepo source detection: scan all packages and apps for utility classes */
+@source '../../../packages/';
+@source '../../../apps/';
+@source '../../../docs/';
+@source '../../../playground/';
+
+/* Dark mode uses .dark class selector, not prefers-color-scheme */
+@custom-variant dark (&:is(.dark *));
+
+/* Explicitly pin Tailwind v4 dynamic spacing for classes like w-150/h-55. */
+@theme {
+  --spacing: 0.25rem;
+}
+
+@theme inline {
+  /* Font */
+  --font-sans: var(--font-family);
+
+  /* Border Radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Box Shadow */
+  --shadow-float:
+    0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
+    0 9px 28px 8px rgb(0 0 0 / 5%);
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
+  --animate-float: float 5s linear 0ms infinite;
+
+  /* ===== Semantic Colors (shadcn-ui) ===== */
+
+  --color-background: hsl(var(--background));
+  --color-background-deep: hsl(var(--background-deep));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-accent-hover: hsl(var(--accent-hover));
+  --color-accent-lighter: hsl(var(--accent-lighter));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-input-background: hsl(var(--input-background));
+  --color-ring: hsl(var(--ring));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-desc: hsl(var(--secondary-desc));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  /* ===== Custom Semantic Colors ===== */
+
+  --color-header: hsl(var(--header));
+  --color-heavy: hsl(var(--heavy));
+  --color-heavy-foreground: hsl(var(--heavy-foreground));
+  --color-main: hsl(var(--main));
+  --color-overlay: hsl(var(--overlay));
+  --color-overlay-content: hsl(var(--overlay-content));
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-deep: hsl(var(--sidebar-deep));
+
+  /* ===== Primary Palette ===== */
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-primary-50: hsl(var(--primary-50));
+  --color-primary-100: hsl(var(--primary-100));
+  --color-primary-200: hsl(var(--primary-200));
+  --color-primary-300: hsl(var(--primary-300));
+  --color-primary-400: hsl(var(--primary-400));
+  --color-primary-500: hsl(var(--primary-500));
+  --color-primary-600: hsl(var(--primary-600));
+  --color-primary-700: hsl(var(--primary-700));
+  --color-primary-active: hsl(var(--primary-700));
+  --color-primary-background-light: hsl(var(--primary-200));
+  --color-primary-background-lighter: hsl(var(--primary-100));
+  --color-primary-background-lightest: hsl(var(--primary-50));
+  --color-primary-border: hsl(var(--primary-400));
+  --color-primary-border-light: hsl(var(--primary-300));
+  --color-primary-hover: hsl(var(--primary-600));
+  --color-primary-text: hsl(var(--primary-500));
+  --color-primary-text-active: hsl(var(--primary-700));
+  --color-primary-text-hover: hsl(var(--primary-600));
+
+  /* ===== Destructive Palette ===== */
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-destructive-50: hsl(var(--destructive-50));
+  --color-destructive-100: hsl(var(--destructive-100));
+  --color-destructive-200: hsl(var(--destructive-200));
+  --color-destructive-300: hsl(var(--destructive-300));
+  --color-destructive-400: hsl(var(--destructive-400));
+  --color-destructive-500: hsl(var(--destructive-500));
+  --color-destructive-600: hsl(var(--destructive-600));
+  --color-destructive-700: hsl(var(--destructive-700));
+  --color-destructive-active: hsl(var(--destructive-700));
+  --color-destructive-background-light: hsl(var(--destructive-200));
+  --color-destructive-background-lighter: hsl(var(--destructive-100));
+  --color-destructive-background-lightest: hsl(var(--destructive-50));
+  --color-destructive-border: hsl(var(--destructive-400));
+  --color-destructive-border-light: hsl(var(--destructive-300));
+  --color-destructive-hover: hsl(var(--destructive-600));
+  --color-destructive-text: hsl(var(--destructive-500));
+  --color-destructive-text-active: hsl(var(--destructive-700));
+  --color-destructive-text-hover: hsl(var(--destructive-600));
+
+  /* ===== Success Palette ===== */
+
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-success-50: hsl(var(--success-50));
+  --color-success-100: hsl(var(--success-100));
+  --color-success-200: hsl(var(--success-200));
+  --color-success-300: hsl(var(--success-300));
+  --color-success-400: hsl(var(--success-400));
+  --color-success-500: hsl(var(--success-500));
+  --color-success-600: hsl(var(--success-600));
+  --color-success-700: hsl(var(--success-700));
+  --color-success-active: hsl(var(--success-700));
+  --color-success-background-light: hsl(var(--success-200));
+  --color-success-background-lighter: hsl(var(--success-100));
+  --color-success-background-lightest: hsl(var(--success-50));
+  --color-success-border: hsl(var(--success-400));
+  --color-success-border-light: hsl(var(--success-300));
+  --color-success-hover: hsl(var(--success-600));
+  --color-success-text: hsl(var(--success-500));
+  --color-success-text-active: hsl(var(--success-700));
+  --color-success-text-hover: hsl(var(--success-600));
+
+  /* ===== Warning Palette ===== */
+
+  --color-warning: hsl(var(--warning));
+  --color-warning-foreground: hsl(var(--warning-foreground));
+  --color-warning-50: hsl(var(--warning-50));
+  --color-warning-100: hsl(var(--warning-100));
+  --color-warning-200: hsl(var(--warning-200));
+  --color-warning-300: hsl(var(--warning-300));
+  --color-warning-400: hsl(var(--warning-400));
+  --color-warning-500: hsl(var(--warning-500));
+  --color-warning-600: hsl(var(--warning-600));
+  --color-warning-700: hsl(var(--warning-700));
+  --color-warning-active: hsl(var(--warning-700));
+  --color-warning-background-light: hsl(var(--warning-200));
+  --color-warning-background-lighter: hsl(var(--warning-100));
+  --color-warning-background-lightest: hsl(var(--warning-50));
+  --color-warning-border: hsl(var(--warning-400));
+  --color-warning-border-light: hsl(var(--warning-300));
+  --color-warning-hover: hsl(var(--warning-600));
+  --color-warning-text: hsl(var(--warning-500));
+  --color-warning-text-active: hsl(var(--warning-700));
+  --color-warning-text-hover: hsl(var(--warning-600));
+
+  /* ===== Green Palette (alias for success shades) ===== */
+
+  --color-green-50: hsl(var(--green-50));
+  --color-green-100: hsl(var(--green-100));
+  --color-green-200: hsl(var(--green-200));
+  --color-green-300: hsl(var(--green-300));
+  --color-green-400: hsl(var(--green-400));
+  --color-green-500: hsl(var(--green-500));
+  --color-green-600: hsl(var(--green-600));
+  --color-green-700: hsl(var(--green-700));
+  --color-green-active: hsl(var(--green-700));
+  --color-green-background-light: hsl(var(--green-200));
+  --color-green-background-lighter: hsl(var(--green-100));
+  --color-green-background-lightest: hsl(var(--green-50));
+  --color-green-border: hsl(var(--green-400));
+  --color-green-border-light: hsl(var(--green-300));
+  --color-green-foreground: hsl(var(--success-foreground));
+  --color-green-hover: hsl(var(--green-600));
+  --color-green-text: hsl(var(--green-500));
+  --color-green-text-active: hsl(var(--green-700));
+  --color-green-text-hover: hsl(var(--green-600));
+
+  /* ===== Red Palette (alias for destructive shades) ===== */
+
+  --color-red-50: hsl(var(--red-50));
+  --color-red-100: hsl(var(--red-100));
+  --color-red-200: hsl(var(--red-200));
+  --color-red-300: hsl(var(--red-300));
+  --color-red-400: hsl(var(--red-400));
+  --color-red-500: hsl(var(--red-500));
+  --color-red-600: hsl(var(--red-600));
+  --color-red-700: hsl(var(--red-700));
+  --color-red-active: hsl(var(--red-700));
+  --color-red-background-light: hsl(var(--red-200));
+  --color-red-background-lighter: hsl(var(--red-100));
+  --color-red-background-lightest: hsl(var(--red-50));
+  --color-red-border: hsl(var(--red-400));
+  --color-red-border-light: hsl(var(--red-300));
+  --color-red-foreground: hsl(var(--destructive-foreground));
+  --color-red-hover: hsl(var(--red-600));
+  --color-red-text: hsl(var(--red-500));
+  --color-red-text-active: hsl(var(--red-700));
+  --color-red-text-hover: hsl(var(--red-600));
+
+  /* ===== Yellow Palette (alias for warning shades) ===== */
+
+  --color-yellow-50: hsl(var(--yellow-50));
+  --color-yellow-100: hsl(var(--yellow-100));
+  --color-yellow-200: hsl(var(--yellow-200));
+  --color-yellow-300: hsl(var(--yellow-300));
+  --color-yellow-400: hsl(var(--yellow-400));
+  --color-yellow-500: hsl(var(--yellow-500));
+  --color-yellow-600: hsl(var(--yellow-600));
+  --color-yellow-700: hsl(var(--yellow-700));
+  --color-yellow-active: hsl(var(--yellow-700));
+  --color-yellow-background-light: hsl(var(--yellow-200));
+  --color-yellow-background-lighter: hsl(var(--yellow-100));
+  --color-yellow-background-lightest: hsl(var(--yellow-50));
+  --color-yellow-border: hsl(var(--yellow-400));
+  --color-yellow-border-light: hsl(var(--yellow-300));
+  --color-yellow-foreground: hsl(var(--warning-foreground));
+  --color-yellow-hover: hsl(var(--yellow-600));
+  --color-yellow-text: hsl(var(--yellow-500));
+  --color-yellow-text-active: hsl(var(--yellow-700));
+  --color-yellow-text-hover: hsl(var(--yellow-600));
+}
+
+/* Keyframes */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* Base styles */
+@layer base {
+  *,
+  ::after,
+  ::before {
+    @apply border-border outline-ring/50;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  html {
+    @apply text-foreground bg-background font-sans;
+
+    scroll-behavior: smooth;
+    font-size: var(--font-size-base, 16px);
+    font-variation-settings: normal;
+    font-synthesis-weight: none;
+    line-height: 1.15;
+    text-rendering: optimizelegibility;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  #app,
+  body,
+  html {
+    @apply size-full;
+  }
+
+  body {
+    min-height: 100vh;
+  }
+
+  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[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    @apply m-0 appearance-none;
+  }
+
+  /* Only adjust scrollbar for non-macOS */
+  html:not([data-platform='macOs']) {
+    ::-webkit-scrollbar {
+      @apply h-2.5 w-2.5;
+    }
+
+    ::-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;
+    }
+  }
+}
+
+/* Custom utilities (v4 @utility syntax) */
+@utility flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@utility flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Component styles (complex selectors, not convertible to @utility) */
+.outline-box {
+  @apply outline-border relative cursor-pointer rounded-md p-1 outline-1;
+}
+
+.outline-box::after {
+  @apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""];
+}
+
+.outline-box.outline-box-active {
+  @apply outline-primary outline-2;
+}
+
+.outline-box.outline-box-active::after {
+  display: none;
+}
+
+.outline-box:not(.outline-box-active):hover::after {
+  @apply outline-primary top-0 left-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;
+}
+
+/* Enter animations (converted from enterAnimationPlugin) */
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.enter-x:nth-child(1) {
+  opacity: 0;
+  transform: translateX(50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.1s forwards;
+}
+
+.enter-x:nth-child(2) {
+  opacity: 0;
+  transform: translateX(50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.2s forwards;
+}
+
+.enter-x:nth-child(3) {
+  opacity: 0;
+  transform: translateX(50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.3s forwards;
+}
+
+.enter-x:nth-child(4) {
+  opacity: 0;
+  transform: translateX(50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.4s forwards;
+}
+
+.enter-x:nth-child(5) {
+  opacity: 0;
+  transform: translateX(50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.5s forwards;
+}
+
+.enter-y:nth-child(1) {
+  opacity: 0;
+  transform: translateY(50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.1s forwards;
+}
+
+.enter-y:nth-child(2) {
+  opacity: 0;
+  transform: translateY(50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.2s forwards;
+}
+
+.enter-y:nth-child(3) {
+  opacity: 0;
+  transform: translateY(50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.3s forwards;
+}
+
+.enter-y:nth-child(4) {
+  opacity: 0;
+  transform: translateY(50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.4s forwards;
+}
+
+.enter-y:nth-child(5) {
+  opacity: 0;
+  transform: translateY(50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.5s forwards;
+}
+
+.-enter-x:nth-child(1) {
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.1s forwards;
+}
+
+.-enter-x:nth-child(2) {
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.2s forwards;
+}
+
+.-enter-x:nth-child(3) {
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.3s forwards;
+}
+
+.-enter-x:nth-child(4) {
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.4s forwards;
+}
+
+.-enter-x:nth-child(5) {
+  opacity: 0;
+  transform: translateX(-50px);
+  animation: enter-x-animation 0.3s ease-in-out 0.5s forwards;
+}
+
+.-enter-y:nth-child(1) {
+  opacity: 0;
+  transform: translateY(-50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.1s forwards;
+}
+
+.-enter-y:nth-child(2) {
+  opacity: 0;
+  transform: translateY(-50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.2s forwards;
+}
+
+.-enter-y:nth-child(3) {
+  opacity: 0;
+  transform: translateY(-50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.3s forwards;
+}
+
+.-enter-y:nth-child(4) {
+  opacity: 0;
+  transform: translateY(-50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.4s forwards;
+}
+
+.-enter-y:nth-child(5) {
+  opacity: 0;
+  transform: translateY(-50px);
+  animation: enter-y-animation 0.3s ease-in-out 0.5s forwards;
+}
+
+html.invert-mode {
+  @apply invert;
+}
+
+html.grayscale-mode {
+  @apply grayscale;
+}
diff --git a/internal/vite-config/src/plugins/tailwind-reference.ts b/internal/vite-config/src/plugins/tailwind-reference.ts
index 8c3185125..86460494c 100644
--- a/internal/vite-config/src/plugins/tailwind-reference.ts
+++ b/internal/vite-config/src/plugins/tailwind-reference.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite';
 
-const REFERENCE_LINE = '@reference "@vben-core/design/theme";\n';
+const REFERENCE_LINE = '@reference "@vben/tailwind-config/theme";\n';
 
 /**
  * Auto-inject @reference into Vue SFC <style> blocks that use @apply.
diff --git a/package.json b/package.json
index 0e93c3bca..37923f436 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "@vben/oxfmt-config": "workspace:*",
     "@vben/oxlint-config": "workspace:*",
     "@vben/stylelint-config": "workspace:*",
+    "@vben/tailwind-config": "workspace:*",
     "@vben/tsconfig": "workspace:*",
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
@@ -93,7 +94,7 @@
     "vue-tsc": "catalog:"
   },
   "engines": {
-    "node": "^20.19.0 || ^22.13.0 || ^24.0.0",
+    "node": "^20.19.0 || ^22.18.0 || ^24.0.0",
     "pnpm": ">=10.0.0"
   },
   "packageManager": "pnpm@10.32.1"
diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json
index e5a6d6e83..0709849e8 100644
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -44,9 +44,6 @@
     }
   },
   "dependencies": {
-    "@iconify/json": "catalog:",
-    "@iconify/tailwind4": "catalog:",
-    "@tailwindcss/typography": "catalog:",
-    "tw-animate-css": "catalog:"
+    "@iconify/json": "catalog:"
   }
 }
diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css
index 54d27e5b8..298194102 100644
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -1,569 +1 @@
-@import 'tailwindcss';
-@import 'tw-animate-css';
-
-@plugin '@tailwindcss/typography';
-@plugin '@iconify/tailwind4';
-
-/* Monorepo source detection: scan all packages and apps for utility classes */
-@source '../../../../../../packages/';
-@source '../../../../../../apps/';
-@source '../../../../../../docs/';
-@source '../../../../../../playground/';
-
-/* Dark mode uses .dark class selector, not prefers-color-scheme */
-@custom-variant dark (&:is(.dark *));
-
-/* Explicitly pin Tailwind v4 dynamic spacing for classes like w-150/h-55. */
-@theme {
-  --spacing: 0.25rem;
-}
-
-@theme inline {
-  /* Font */
-  --font-sans: var(--font-family);
-
-  /* Border Radius */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  /* Box Shadow */
-  --shadow-float:
-    0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
-    0 9px 28px 8px rgb(0 0 0 / 5%);
-
-  /* Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-  --animate-collapsible-down: collapsible-down 0.2s ease-in-out;
-  --animate-collapsible-up: collapsible-up 0.2s ease-in-out;
-  --animate-float: float 5s linear 0ms infinite;
-
-  /* ===== Semantic Colors (shadcn-ui) ===== */
-
-  --color-background: hsl(var(--background));
-  --color-background-deep: hsl(var(--background-deep));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-accent-hover: hsl(var(--accent-hover));
-  --color-accent-lighter: hsl(var(--accent-lighter));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-input-background: hsl(var(--input-background));
-  --color-ring: hsl(var(--ring));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-desc: hsl(var(--secondary-desc));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  /* ===== Custom Semantic Colors ===== */
-
-  --color-header: hsl(var(--header));
-  --color-heavy: hsl(var(--heavy));
-  --color-heavy-foreground: hsl(var(--heavy-foreground));
-  --color-main: hsl(var(--main));
-  --color-overlay: hsl(var(--overlay));
-  --color-overlay-content: hsl(var(--overlay-content));
-  --color-sidebar: hsl(var(--sidebar));
-  --color-sidebar-deep: hsl(var(--sidebar-deep));
-
-  /* ===== Primary Palette ===== */
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-primary-50: hsl(var(--primary-50));
-  --color-primary-100: hsl(var(--primary-100));
-  --color-primary-200: hsl(var(--primary-200));
-  --color-primary-300: hsl(var(--primary-300));
-  --color-primary-400: hsl(var(--primary-400));
-  --color-primary-500: hsl(var(--primary-500));
-  --color-primary-600: hsl(var(--primary-600));
-  --color-primary-700: hsl(var(--primary-700));
-  --color-primary-active: hsl(var(--primary-700));
-  --color-primary-background-light: hsl(var(--primary-200));
-  --color-primary-background-lighter: hsl(var(--primary-100));
-  --color-primary-background-lightest: hsl(var(--primary-50));
-  --color-primary-border: hsl(var(--primary-400));
-  --color-primary-border-light: hsl(var(--primary-300));
-  --color-primary-hover: hsl(var(--primary-600));
-  --color-primary-text: hsl(var(--primary-500));
-  --color-primary-text-active: hsl(var(--primary-700));
-  --color-primary-text-hover: hsl(var(--primary-600));
-
-  /* ===== Destructive Palette ===== */
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-destructive-50: hsl(var(--destructive-50));
-  --color-destructive-100: hsl(var(--destructive-100));
-  --color-destructive-200: hsl(var(--destructive-200));
-  --color-destructive-300: hsl(var(--destructive-300));
-  --color-destructive-400: hsl(var(--destructive-400));
-  --color-destructive-500: hsl(var(--destructive-500));
-  --color-destructive-600: hsl(var(--destructive-600));
-  --color-destructive-700: hsl(var(--destructive-700));
-  --color-destructive-active: hsl(var(--destructive-700));
-  --color-destructive-background-light: hsl(var(--destructive-200));
-  --color-destructive-background-lighter: hsl(var(--destructive-100));
-  --color-destructive-background-lightest: hsl(var(--destructive-50));
-  --color-destructive-border: hsl(var(--destructive-400));
-  --color-destructive-border-light: hsl(var(--destructive-300));
-  --color-destructive-hover: hsl(var(--destructive-600));
-  --color-destructive-text: hsl(var(--destructive-500));
-  --color-destructive-text-active: hsl(var(--destructive-700));
-  --color-destructive-text-hover: hsl(var(--destructive-600));
-
-  /* ===== Success Palette ===== */
-
-  --color-success: hsl(var(--success));
-  --color-success-foreground: hsl(var(--success-foreground));
-  --color-success-50: hsl(var(--success-50));
-  --color-success-100: hsl(var(--success-100));
-  --color-success-200: hsl(var(--success-200));
-  --color-success-300: hsl(var(--success-300));
-  --color-success-400: hsl(var(--success-400));
-  --color-success-500: hsl(var(--success-500));
-  --color-success-600: hsl(var(--success-600));
-  --color-success-700: hsl(var(--success-700));
-  --color-success-active: hsl(var(--success-700));
-  --color-success-background-light: hsl(var(--success-200));
-  --color-success-background-lighter: hsl(var(--success-100));
-  --color-success-background-lightest: hsl(var(--success-50));
-  --color-success-border: hsl(var(--success-400));
-  --color-success-border-light: hsl(var(--success-300));
-  --color-success-hover: hsl(var(--success-600));
-  --color-success-text: hsl(var(--success-500));
-  --color-success-text-active: hsl(var(--success-700));
-  --color-success-text-hover: hsl(var(--success-600));
-
-  /* ===== Warning Palette ===== */
-
-  --color-warning: hsl(var(--warning));
-  --color-warning-foreground: hsl(var(--warning-foreground));
-  --color-warning-50: hsl(var(--warning-50));
-  --color-warning-100: hsl(var(--warning-100));
-  --color-warning-200: hsl(var(--warning-200));
-  --color-warning-300: hsl(var(--warning-300));
-  --color-warning-400: hsl(var(--warning-400));
-  --color-warning-500: hsl(var(--warning-500));
-  --color-warning-600: hsl(var(--warning-600));
-  --color-warning-700: hsl(var(--warning-700));
-  --color-warning-active: hsl(var(--warning-700));
-  --color-warning-background-light: hsl(var(--warning-200));
-  --color-warning-background-lighter: hsl(var(--warning-100));
-  --color-warning-background-lightest: hsl(var(--warning-50));
-  --color-warning-border: hsl(var(--warning-400));
-  --color-warning-border-light: hsl(var(--warning-300));
-  --color-warning-hover: hsl(var(--warning-600));
-  --color-warning-text: hsl(var(--warning-500));
-  --color-warning-text-active: hsl(var(--warning-700));
-  --color-warning-text-hover: hsl(var(--warning-600));
-
-  /* ===== Green Palette (alias for success shades) ===== */
-
-  --color-green-50: hsl(var(--green-50));
-  --color-green-100: hsl(var(--green-100));
-  --color-green-200: hsl(var(--green-200));
-  --color-green-300: hsl(var(--green-300));
-  --color-green-400: hsl(var(--green-400));
-  --color-green-500: hsl(var(--green-500));
-  --color-green-600: hsl(var(--green-600));
-  --color-green-700: hsl(var(--green-700));
-  --color-green-active: hsl(var(--green-700));
-  --color-green-background-light: hsl(var(--green-200));
-  --color-green-background-lighter: hsl(var(--green-100));
-  --color-green-background-lightest: hsl(var(--green-50));
-  --color-green-border: hsl(var(--green-400));
-  --color-green-border-light: hsl(var(--green-300));
-  --color-green-foreground: hsl(var(--success-foreground));
-  --color-green-hover: hsl(var(--green-600));
-  --color-green-text: hsl(var(--green-500));
-  --color-green-text-active: hsl(var(--green-700));
-  --color-green-text-hover: hsl(var(--green-600));
-
-  /* ===== Red Palette (alias for destructive shades) ===== */
-
-  --color-red-50: hsl(var(--red-50));
-  --color-red-100: hsl(var(--red-100));
-  --color-red-200: hsl(var(--red-200));
-  --color-red-300: hsl(var(--red-300));
-  --color-red-400: hsl(var(--red-400));
-  --color-red-500: hsl(var(--red-500));
-  --color-red-600: hsl(var(--red-600));
-  --color-red-700: hsl(var(--red-700));
-  --color-red-active: hsl(var(--red-700));
-  --color-red-background-light: hsl(var(--red-200));
-  --color-red-background-lighter: hsl(var(--red-100));
-  --color-red-background-lightest: hsl(var(--red-50));
-  --color-red-border: hsl(var(--red-400));
-  --color-red-border-light: hsl(var(--red-300));
-  --color-red-foreground: hsl(var(--destructive-foreground));
-  --color-red-hover: hsl(var(--red-600));
-  --color-red-text: hsl(var(--red-500));
-  --color-red-text-active: hsl(var(--red-700));
-  --color-red-text-hover: hsl(var(--red-600));
-
-  /* ===== Yellow Palette (alias for warning shades) ===== */
-
-  --color-yellow-50: hsl(var(--yellow-50));
-  --color-yellow-100: hsl(var(--yellow-100));
-  --color-yellow-200: hsl(var(--yellow-200));
-  --color-yellow-300: hsl(var(--yellow-300));
-  --color-yellow-400: hsl(var(--yellow-400));
-  --color-yellow-500: hsl(var(--yellow-500));
-  --color-yellow-600: hsl(var(--yellow-600));
-  --color-yellow-700: hsl(var(--yellow-700));
-  --color-yellow-active: hsl(var(--yellow-700));
-  --color-yellow-background-light: hsl(var(--yellow-200));
-  --color-yellow-background-lighter: hsl(var(--yellow-100));
-  --color-yellow-background-lightest: hsl(var(--yellow-50));
-  --color-yellow-border: hsl(var(--yellow-400));
-  --color-yellow-border-light: hsl(var(--yellow-300));
-  --color-yellow-foreground: hsl(var(--warning-foreground));
-  --color-yellow-hover: hsl(var(--yellow-600));
-  --color-yellow-text: hsl(var(--yellow-500));
-  --color-yellow-text-active: hsl(var(--yellow-700));
-  --color-yellow-text-hover: hsl(var(--yellow-600));
-}
-
-/* Keyframes */
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: var(--reka-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--reka-accordion-content-height);
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-@keyframes collapsible-down {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: var(--reka-collapsible-content-height);
-  }
-}
-
-@keyframes collapsible-up {
-  from {
-    height: var(--reka-collapsible-content-height);
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-@keyframes float {
-  0% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-20px);
-  }
-
-  100% {
-    transform: translateY(0);
-  }
-}
-
-/* Base styles */
-@layer base {
-  *,
-  ::after,
-  ::before {
-    @apply border-border outline-ring/50;
-
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-  }
-
-  html {
-    @apply text-foreground bg-background font-sans;
-
-    scroll-behavior: smooth;
-    font-size: var(--font-size-base, 16px);
-    font-variation-settings: normal;
-    font-synthesis-weight: none;
-    line-height: 1.15;
-    text-rendering: optimizelegibility;
-    text-size-adjust: 100%;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  #app,
-  body,
-  html {
-    @apply size-full;
-  }
-
-  body {
-    min-height: 100vh;
-  }
-
-  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[type='number']::-webkit-inner-spin-button,
-  input[type='number']::-webkit-outer-spin-button {
-    @apply m-0 appearance-none;
-  }
-
-  /* Only adjust scrollbar for non-macOS */
-  html:not([data-platform='macOs']) {
-    ::-webkit-scrollbar {
-      @apply h-2.5 w-2.5;
-    }
-
-    ::-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;
-    }
-  }
-}
-
-/* Custom utilities (v4 @utility syntax) */
-@utility flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@utility flex-col-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Component styles (complex selectors, not convertible to @utility) */
-.outline-box {
-  @apply outline-border relative cursor-pointer rounded-md p-1 outline-1;
-}
-
-.outline-box::after {
-  @apply absolute top-1/2 left-1/2 z-20 h-0 w-px rounded-sm opacity-0 outline-2 outline-transparent transition-all duration-300 content-[""];
-}
-
-.outline-box.outline-box-active {
-  @apply outline-primary outline-2;
-}
-
-.outline-box.outline-box-active::after {
-  display: none;
-}
-
-.outline-box:not(.outline-box-active):hover::after {
-  @apply outline-primary top-0 left-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;
-}
-
-/* Enter animations (converted from enterAnimationPlugin) */
-@keyframes enter-x-animation {
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes enter-y-animation {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.enter-x:nth-child(1) {
-  opacity: 0;
-  transform: translateX(50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.1s forwards;
-}
-
-.enter-x:nth-child(2) {
-  opacity: 0;
-  transform: translateX(50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.2s forwards;
-}
-
-.enter-x:nth-child(3) {
-  opacity: 0;
-  transform: translateX(50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.3s forwards;
-}
-
-.enter-x:nth-child(4) {
-  opacity: 0;
-  transform: translateX(50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.4s forwards;
-}
-
-.enter-x:nth-child(5) {
-  opacity: 0;
-  transform: translateX(50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.5s forwards;
-}
-
-.enter-y:nth-child(1) {
-  opacity: 0;
-  transform: translateY(50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.1s forwards;
-}
-
-.enter-y:nth-child(2) {
-  opacity: 0;
-  transform: translateY(50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.2s forwards;
-}
-
-.enter-y:nth-child(3) {
-  opacity: 0;
-  transform: translateY(50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.3s forwards;
-}
-
-.enter-y:nth-child(4) {
-  opacity: 0;
-  transform: translateY(50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.4s forwards;
-}
-
-.enter-y:nth-child(5) {
-  opacity: 0;
-  transform: translateY(50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.5s forwards;
-}
-
-.-enter-x:nth-child(1) {
-  opacity: 0;
-  transform: translateX(-50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.1s forwards;
-}
-
-.-enter-x:nth-child(2) {
-  opacity: 0;
-  transform: translateX(-50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.2s forwards;
-}
-
-.-enter-x:nth-child(3) {
-  opacity: 0;
-  transform: translateX(-50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.3s forwards;
-}
-
-.-enter-x:nth-child(4) {
-  opacity: 0;
-  transform: translateX(-50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.4s forwards;
-}
-
-.-enter-x:nth-child(5) {
-  opacity: 0;
-  transform: translateX(-50px);
-  animation: enter-x-animation 0.3s ease-in-out 0.5s forwards;
-}
-
-.-enter-y:nth-child(1) {
-  opacity: 0;
-  transform: translateY(-50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.1s forwards;
-}
-
-.-enter-y:nth-child(2) {
-  opacity: 0;
-  transform: translateY(-50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.2s forwards;
-}
-
-.-enter-y:nth-child(3) {
-  opacity: 0;
-  transform: translateY(-50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.3s forwards;
-}
-
-.-enter-y:nth-child(4) {
-  opacity: 0;
-  transform: translateY(-50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.4s forwards;
-}
-
-.-enter-y:nth-child(5) {
-  opacity: 0;
-  transform: translateY(-50px);
-  animation: enter-y-animation 0.3s ease-in-out 0.5s forwards;
-}
-
-html.invert-mode {
-  @apply invert;
-}
-
-html.grayscale-mode {
-  @apply grayscale;
-}
+@import '@vben/tailwind-config/theme';
diff --git a/packages/@core/base/design/src/css/nprogress.css b/packages/@core/base/design/src/css/nprogress.css
index bfc8aed18..0dd2288a9 100644
--- a/packages/@core/base/design/src/css/nprogress.css
+++ b/packages/@core/base/design/src/css/nprogress.css
@@ -1,4 +1,4 @@
-@reference "./global.css";
+@reference "@vben/tailwind-config/theme";
 
 /* Make clicks pass-through */
 #nprogress {
diff --git a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
index c8c63ba1d..8a1e2a32c 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -58,7 +58,7 @@ function menuIcon(menu: MenuRecordRaw) {
   </ul>
 </template>
 <style scoped>
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 .vben-normal-menu {
   --menu-item-margin-y: 4px;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/assets/index.css b/packages/@core/ui-kit/shadcn-ui/src/assets/index.css
new file mode 100644
index 000000000..cbd9be68b
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/assets/index.css
@@ -0,0 +1 @@
+@reference "@vben/tailwind-config/theme";
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
index 4fd6c5efc..b8c560c2b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -50,7 +50,7 @@ function handleClick(index: number, path?: string) {
   </ul>
 </template>
 <style scoped>
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 li {
   @apply h-7;
diff --git a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
index 288ff5285..d9efea9b0 100644
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -168,7 +168,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 </template>
 
 <style scoped>
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 .tabs-chrome__item:not(.dragging) {
   @apply cursor-pointer;
diff --git a/packages/effects/common-ui/src/components/cropper/cropper.vue b/packages/effects/common-ui/src/components/cropper/cropper.vue
index 332e6bd71..27f1ca834 100644
--- a/packages/effects/common-ui/src/components/cropper/cropper.vue
+++ b/packages/effects/common-ui/src/components/cropper/cropper.vue
@@ -851,7 +851,7 @@ defineExpose({ getCropImage });
 </template>
 
 <style scoped>
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 .cropper-action-wrapper {
   @apply box-border flex items-center justify-center;
diff --git a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
index 8543d36c8..178f97765 100644
--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -119,7 +119,7 @@ function toggleTheme(event: MouseEvent) {
 </template>
 
 <style scoped>
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 .theme-toggle__moon > circle {
   transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
diff --git a/packages/effects/plugins/src/vxe-table/style.css b/packages/effects/plugins/src/vxe-table/style.css
index 58a044065..beb632c78 100644
--- a/packages/effects/plugins/src/vxe-table/style.css
+++ b/packages/effects/plugins/src/vxe-table/style.css
@@ -1,4 +1,4 @@
-@reference "@vben-core/design/theme";
+@reference "@vben/tailwind-config/theme";
 
 :root .vxe-grid {
   --vxe-ui-font-color: hsl(var(--foreground));
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 06d14fc6e..9f99ac5f0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -12,70 +12,70 @@ packages:
   - scripts/*
 
 overrides:
-  '@ast-grep/napi': 'catalog:'
-  '@ctrl/tinycolor': 'catalog:'
-  clsx: 'catalog:'
-  pinia: 'catalog:'
-  vue: 'catalog:'
+  "@ast-grep/napi": "catalog:"
+  "@ctrl/tinycolor": "catalog:"
+  clsx: "catalog:"
+  pinia: "catalog:"
+  vue: "catalog:"
 catalog:
-  '@alova/adapter-axios': ^2.0.17
-  '@antdv-next/auto-import-resolver': 1.0.7
-  '@antdv-next/happy-work-theme': ^1.0.0
-  '@antdv-next/icons': 1.0.5
-  '@ast-grep/napi': ^0.42.0
-  '@changesets/changelog-github': ^0.6.0
-  '@changesets/cli': ^2.30.0
-  '@changesets/git': ^3.0.4
-  '@clack/prompts': ^1.1.0
-  '@codemirror/lang-html': ^6.4.9
-  '@codemirror/lang-java': ^6.0.1
-  '@codemirror/lang-javascript': ^6.2.2
-  '@codemirror/lang-sql': ^6.7.1
-  '@codemirror/lang-vue': ^0.1.3
-  '@codemirror/lang-xml': ^6.1.0
-  '@codemirror/theme-one-dark': ^6.1.2
-  '@commitlint/cli': ^20.5.0
-  '@commitlint/config-conventional': ^20.5.0
-  '@ctrl/tinycolor': ^4.2.0
-  '@eslint-community/eslint-plugin-eslint-comments': ^4.7.1
-  '@eslint/js': ^10.0.1
-  '@iconify/json': ^2.2.449
-  '@iconify/tailwind4': ^1.2.3
-  '@iconify/vue': ^5.0.0
-  '@intlify/core-base': ^11.3.0
-  '@intlify/unplugin-vue-i18n': ^11.0.7
-  '@jspm/generator': ^2.11.0
-  '@manypkg/get-packages': ^3.1.0
-  '@playwright/test': ^1.58.2
-  '@pnpm/workspace.read-manifest': ^1000.3.0
-  '@stylistic/stylelint-plugin': ^5.0.1
-  '@tailwindcss/typography': ^0.5.19
-  '@tailwindcss/vite': ^4.2.1
-  '@tanstack/vue-store': ^0.9.2
-  '@tinymce/tinymce-vue': ^6.0.1
-  '@tsdown/css': ^0.21.3
-  '@types/archiver': ^7.0.0
-  '@types/html-minifier-terser': ^7.0.2
-  '@types/json-bigint': ^1.0.4
-  '@types/lodash-es': ^4.17.12
-  '@types/lodash.clonedeep': ^4.5.9
-  '@types/node': ^25.5.0
-  '@types/nprogress': ^0.2.3
-  '@types/qrcode': ^1.5.6
-  '@types/qs': ^6.15.0
-  '@types/sortablejs': ^1.15.9
-  '@typescript-eslint/eslint-plugin': ^8.57.0
-  '@typescript-eslint/parser': ^8.57.0
-  '@vee-validate/zod': ^4.15.1
-  '@vitejs/plugin-vue': ^6.0.5
-  '@vitejs/plugin-vue-jsx': ^5.1.5
-  '@vue/shared': ^3.5.30
-  '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^14.2.1
-  '@vueuse/integrations': ^14.2.1
-  '@vueuse/motion': ^3.0.3
+  "@alova/adapter-axios": ^2.0.17
+  "@antdv-next/auto-import-resolver": 1.0.7
+  "@antdv-next/happy-work-theme": ^1.0.0
+  "@antdv-next/icons": 1.0.5
+  "@ast-grep/napi": ^0.42.0
+  "@changesets/changelog-github": ^0.6.0
+  "@changesets/cli": ^2.30.0
+  "@changesets/git": ^3.0.4
+  "@clack/prompts": ^1.1.0
+  "@codemirror/lang-html": ^6.4.9
+  "@codemirror/lang-java": ^6.0.1
+  "@codemirror/lang-javascript": ^6.2.2
+  "@codemirror/lang-sql": ^6.7.1
+  "@codemirror/lang-vue": ^0.1.3
+  "@codemirror/lang-xml": ^6.1.0
+  "@codemirror/theme-one-dark": ^6.1.2
+  "@commitlint/cli": ^20.5.0
+  "@commitlint/config-conventional": ^20.5.0
+  "@ctrl/tinycolor": ^4.2.0
+  "@eslint-community/eslint-plugin-eslint-comments": ^4.7.1
+  "@eslint/js": ^10.0.1
+  "@iconify/json": ^2.2.451
+  "@iconify/tailwind4": ^1.2.3
+  "@iconify/vue": ^5.0.0
+  "@intlify/core-base": ^11.3.0
+  "@intlify/unplugin-vue-i18n": ^11.0.7
+  "@jspm/generator": ^2.12.0
+  "@manypkg/get-packages": ^3.1.0
+  "@playwright/test": ^1.58.2
+  "@pnpm/workspace.read-manifest": ^1000.3.0
+  "@stylistic/stylelint-plugin": ^5.0.1
+  "@tailwindcss/typography": ^0.5.19
+  "@tailwindcss/vite": ^4.2.2
+  "@tanstack/vue-store": ^0.9.2
+  "@tinymce/tinymce-vue": ^6.0.1
+  "@tsdown/css": ^0.21.4
+  "@types/archiver": ^7.0.0
+  "@types/html-minifier-terser": ^7.0.2
+  "@types/json-bigint": ^1.0.4
+  "@types/lodash-es": ^4.17.12
+  "@types/lodash.clonedeep": ^4.5.9
+  "@types/node": ^25.5.0
+  "@types/nprogress": ^0.2.3
+  "@types/qrcode": ^1.5.6
+  "@types/qs": ^6.15.0
+  "@types/sortablejs": ^1.15.9
+  "@typescript-eslint/eslint-plugin": ^8.57.1
+  "@typescript-eslint/parser": ^8.57.1
+  "@vee-validate/zod": ^4.15.1
+  "@vitejs/plugin-vue": ^6.0.5
+  "@vitejs/plugin-vue-jsx": ^5.1.5
+  "@vue/shared": ^3.5.30
+  "@vue/test-utils": ^2.4.6
+  "@vueuse/core": ^14.2.1
+  "@vueuse/integrations": ^14.2.1
+  "@vueuse/motion": ^3.0.3
   alova: ^3.4.1
-  antdv-next: ^1.1.4
+  antdv-next: ^1.1.5
   archiver: ^7.0.1
   axios: ^1.13.6
   axios-mock-adapter: ^2.1.0
@@ -104,7 +104,7 @@ catalog:
   eslint-plugin-command: ^3.5.2
   eslint-plugin-jsonc: ^3.1.2
   eslint-plugin-n: ^17.24.0
-  eslint-plugin-perfectionist: ^5.6.0
+  eslint-plugin-perfectionist: ^5.7.0
   eslint-plugin-pnpm: ^1.6.0
   eslint-plugin-unicorn: ^63.0.0
   eslint-plugin-unused-imports: ^4.4.1
@@ -126,8 +126,8 @@ catalog:
   nitropack: ^2.13.1
   nprogress: ^0.2.0
   ora: ^9.3.0
-  oxfmt: ^0.40.0
-  oxlint: ^1.55.0
+  oxfmt: ^0.41.0
+  oxlint: ^1.56.0
   oxlint-tsgolint: ^0.17.0
   pinia: ^3.0.4
   pinia-plugin-persistedstate: ^4.7.1
@@ -148,7 +148,7 @@ catalog:
   secure-ls: ^2.0.0
   sortablejs: ^1.15.7
   stylelint: ^17.4.0
-  stylelint-config-recess-order: ^7.6.1
+  stylelint-config-recess-order: ^7.7.0
   stylelint-config-recommended: ^18.0.0
   stylelint-config-recommended-scss: ^17.0.0
   stylelint-config-recommended-vue: ^1.6.1
@@ -156,12 +156,12 @@ catalog:
   stylelint-order: ^8.1.1
   stylelint-scss: ^7.0.0
   tailwind-merge: ^3.5.0
-  tailwindcss: ^4.2.1
+  tailwindcss: ^4.2.2
   theme-colors: ^0.1.0
   tinymce: 7.9.1
   tippy.js: ^6.3.7
-  tsdown: ^0.21.3
-  turbo: ^2.8.17
+  tsdown: ^0.21.4
+  turbo: ^2.8.19
   tw-animate-css: ^1.4.0
   typescript: ^5.9.3
   unplugin-dts: ^1.0.0-beta.6
@@ -185,9 +185,9 @@ catalog:
   vue-json-viewer: ^3.0.4
   vue-router: ^5.0.3
   vue-tippy: ^6.7.1
-  vue-tsc: ^3.2.5
-  vxe-pc-ui: 4.12.16
-  vxe-table: ^4.17.46
+  vue-tsc: ^3.2.6
+  vxe-pc-ui: ^4.13.10
+  vxe-table: ^4.18.5
   watermark-js-plus: ^1.6.3
   yaml-eslint-parser: ^2.0.0
   zod: ^3.25.76
diff --git a/scripts/vsh/src/check-dep/index.ts b/scripts/vsh/src/check-dep/index.ts
index bbda58280..320166d91 100644
--- a/scripts/vsh/src/check-dep/index.ts
+++ b/scripts/vsh/src/check-dep/index.ts
@@ -11,6 +11,7 @@ const DEFAULT_CONFIG = {
     'vite',
     'vitest',
     'tsdown',
+    '@vben/tailwind-config',
     '@vben/tsconfig',
     '@vben/vite-config',
     '@types/*',
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index d4bda756d..97b9b72dc 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -28,6 +28,10 @@
       "name": "@vben/node-utils",
       "path": "internal/node-utils",
     },
+    {
+      "name": "@vben/tailwind-config",
+      "path": "internal/tailwind-config"
+    },
     {
       "name": "@vben/tsconfig",
       "path": "internal/tsconfig",