From 0c300d040ce5a585577bfeaf5c2fc9323aa1a21a Mon Sep 17 00:00:00 2001 From: xingyu Date: Thu, 19 Mar 2026 15:51:09 +0800 Subject: [PATCH] fix: tailwindcss config (#7693) * chore: update deps * fix: tailwindcss config * fix: lint * fix: lint * chore: update deps --- .vscode/settings.json | 2 +- docs/package.json | 1 + docs/src/en/guide/project/tailwindcss.md | 6 +- docs/src/guide/project/tailwindcss.md | 6 +- .../eslint-config/src/configs/node.ts | 1 + .../oxlint-config/src/configs/tailwindcss.ts | 2 +- internal/tailwind-config/package.json | 38 + internal/tailwind-config/src/index.ts | 1 + internal/tailwind-config/src/theme.css | 569 +++++++ .../src/plugins/tailwind-reference.ts | 2 +- package.json | 3 +- packages/@core/base/design/package.json | 5 +- packages/@core/base/design/src/css/global.css | 570 +------ .../@core/base/design/src/css/nprogress.css | 2 +- .../components/normal-menu/normal-menu.vue | 2 +- .../ui-kit/shadcn-ui/src/assets/index.css | 1 + .../breadcrumb/breadcrumb-background.vue | 2 +- .../src/components/tabs-chrome/tabs.vue | 2 +- .../src/components/cropper/cropper.vue | 2 +- .../src/widgets/theme-toggle/theme-button.vue | 2 +- .../effects/plugins/src/vxe-table/style.css | 2 +- playground/src/views/examples/form/basic.vue | 2 +- pnpm-lock.yaml | 1313 ++++++++--------- pnpm-workspace.yaml | 38 +- scripts/vsh/src/check-dep/index.ts | 1 + vben-admin.code-workspace | 4 + 26 files changed, 1258 insertions(+), 1321 deletions(-) create mode 100644 internal/tailwind-config/package.json create mode 100644 internal/tailwind-config/src/index.ts create mode 100644 internal/tailwind-config/src/theme.css create mode 100644 packages/@core/ui-kit/shadcn-ui/src/assets/index.css diff --git a/.vscode/settings.json b/.vscode/settings.json index a35e6f0c7..44a3a8ddc 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/docs/package.json b/docs/package.json index bee65c99a..c418d797f 100644 --- a/docs/package.json +++ b/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:", diff --git a/docs/src/en/guide/project/tailwindcss.md b/docs/src/en/guide/project/tailwindcss.md index 98e27ba7c..131fdcbb7 100644 --- a/docs/src/en/guide/project/tailwindcss.md +++ b/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. diff --git a/docs/src/guide/project/tailwindcss.md b/docs/src/guide/project/tailwindcss.md index c0f6e7edd..c51bd75a5 100644 --- a/docs/src/guide/project/tailwindcss.md +++ b/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"`，一般不需要手动补充。 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 { { 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/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