fix: tailwindcss config (#7693)

* chore: update deps

* fix: tailwindcss config

* fix: lint

* fix: lint

* chore: update deps

.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,

docs/package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@nolebase/vitepress-plugin-git-changelog": "catalog:",
     "@tailwindcss/vite": "catalog:",
+    "@vben/tailwind-config": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vite-pwa/vitepress": "catalog:",
     "vitepress": "catalog:",

docs/src/en/guide/project/tailwindcss.md

@@ -6,7 +6,7 @@
 
 The project no longer maintains Tailwind through `tailwind.config.*` files. Theme definitions and scan scope are now managed through CSS and the shared Vite configuration.
 
-- Theme entry: `packages/@core/base/design/src/css/global.css`
+- Theme entry: `internal/tailwind-config/src/theme.css`
 - Vite integration: `internal/vite-config`
 
 In `global.css`, you will see the Tailwind CSS v4 directives currently used by the project, such as:
@@ -21,7 +21,7 @@ In `global.css`, you will see the Tailwind CSS v4 directives currently used by t
 
 The project does not decide whether Tailwind CSS is enabled based on whether a package contains `tailwind.config.mjs`.
 
-Apps and packages share `@vben/vite-config`, which integrates `@tailwindcss/vite`. The Tailwind scan scope is managed centrally in `packages/@core/base/design/src/css/global.css`.
+Apps and packages share `@vben/vite-config`, which integrates `@tailwindcss/vite`. The Tailwind scan scope is managed centrally in `@vben/tailwind-config`, backed by `internal/tailwind-config/src/theme.css`.
 
 ::: tip Notes on using Tailwind CSS in packages
 
@@ -35,4 +35,4 @@ The project applies a shared handling layer for `@apply` inside Vue single-file
 
 - `internal/vite-config/src/plugins/tailwind-reference.ts`
 
-When component styles use `@apply`, the required `@reference` is injected automatically in most cases.
+When component styles use `@apply`, `@reference "@vben/tailwind-config/theme"` is injected automatically in most cases.

docs/src/guide/project/tailwindcss.md

@@ -6,7 +6,7 @@
 
 项目当前不再通过 `tailwind.config.*` 文件维护 Tailwind 配置，主题与扫描范围都统一放在 CSS 与共享 Vite 配置中。
 
-- 主题入口：`packages/@core/base/design/src/css/global.css`
+- 主题入口：`internal/tailwind-config/src/theme.css`
 - Vite 集成：`internal/vite-config`
 
 在 `global.css` 中你会看到当前项目使用的 Tailwind CSS v4 指令，例如：
@@ -21,7 +21,7 @@
 
 当前项目不会根据某个包下是否存在 `tailwind.config.mjs` 来决定是否启用 Tailwind CSS。
 
-应用和包统一复用 `@vben/vite-config`，并由该配置接入 `@tailwindcss/vite`。Tailwind 的扫描范围则统一在 `packages/@core/base/design/src/css/global.css` 中维护。
+应用和包统一复用 `@vben/vite-config`，并由该配置接入 `@tailwindcss/vite`。Tailwind 的扫描范围则统一在 `@vben/tailwind-config` 对应的 `internal/tailwind-config/src/theme.css` 中维护。
 
 ::: tip 包使用 Tailwind CSS 的说明
 
@@ -35,4 +35,4 @@
 
 - `internal/vite-config/src/plugins/tailwind-reference.ts`
 
-当组件样式中使用 `@apply` 时，会自动注入对应的 `@reference`，一般不需要手动补充。
+当组件样式中使用 `@apply` 时，会自动注入 `@reference "@vben/tailwind-config/theme"`，一般不需要手动补充。

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',

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,
 };
 

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:"
+  }
+}

internal/tailwind-config/src/index.ts

@@ -0,0 +1 @@
+import './theme.css';

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;
+}

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.

package.json

@@ -75,6 +75,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:*",
@@ -103,7 +104,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"

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:"
   }
 }

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';

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 {

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;

packages/@core/ui-kit/shadcn-ui/src/assets/index.css

@@ -0,0 +1 @@
+@reference "@vben/tailwind-config/theme";

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;

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -173,7 +173,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;

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;

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);

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));

playground/src/views/examples/form/basic.vue

@@ -366,7 +366,7 @@ const [BaseForm, baseFormApi] = useVbenForm({
           }
         },
         onDragSort: (oldIndex: number, newIndex: number) => {
-          console.info(`图片从 ${oldIndex} 移动到 ${newIndex}`);
+          console.warn(`图片从 ${oldIndex} 移动到 ${newIndex}`);
         },
       },
       fieldName: 'files',

pnpm-workspace.yaml

@@ -31,22 +31,22 @@ catalog:
   '@eslint-community/eslint-plugin-eslint-comments': ^4.7.1
   '@eslint/js': ^10.0.1
   '@faker-js/faker': ^10.3.0
-  '@iconify/json': ^2.2.449
+  '@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.11.0
+  '@jspm/generator': ^2.12.0
   '@manypkg/get-packages': ^3.1.0
   '@nolebase/vitepress-plugin-git-changelog': ^2.18.2
   '@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-query': ^5.92.9
+  '@tailwindcss/vite': ^4.2.2
+  '@tanstack/vue-query': ^5.92.10
   '@tanstack/vue-store': ^0.9.2
-  '@tsdown/css': ^0.21.3
+  '@tsdown/css': ^0.21.4
   '@types/archiver': ^7.0.0
   '@types/html-minifier-terser': ^7.0.2
   '@types/json-bigint': ^1.0.4
@@ -57,8 +57,8 @@ catalog:
   '@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
+  '@typescript-eslint/eslint-plugin': ^8.57.1
+  '@typescript-eslint/parser': ^8.57.1
   '@vee-validate/zod': ^4.15.1
   '@vite-pwa/vitepress': ^1.1.0
   '@vitejs/plugin-vue': ^6.0.5
@@ -69,7 +69,7 @@ catalog:
   '@vueuse/integrations': ^14.2.1
   '@vueuse/motion': ^3.0.3
   ant-design-vue: ^4.2.6
-  antdv-next: ^1.1.4
+  antdv-next: ^1.1.5
   archiver: ^7.0.1
   axios: ^1.13.6
   axios-mock-adapter: ^2.1.0
@@ -97,7 +97,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
@@ -107,7 +107,7 @@ catalog:
   find-up: ^8.0.0
   get-port: ^7.1.0
   globals: ^17.4.0
-  h3: ^1.15.6
+  h3: ^1.15.8
   happy-dom: ^20.8.4
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
@@ -121,8 +121,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
@@ -143,7 +143,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
@@ -151,12 +151,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
   tdesign-vue-next: ^1.18.5
   theme-colors: ^0.1.0
   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
@@ -178,9 +178,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.13.8
-  vxe-table: ^4.18.4
+  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

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/*',

vben-admin.code-workspace

@@ -52,6 +52,10 @@
       "name": "@vben/node-utils",
       "path": "internal/node-utils"
     },
+    {
+      "name": "@vben/tailwind-config",
+      "path": "internal/tailwind-config"
+    },
     {
       "name": "@vben/tsconfig",
       "path": "internal/tsconfig"