diff --git a/internal/tailwind-config/src/theme.css b/internal/tailwind-config/src/theme.css index c212dc66e..e93f1fbf8 100644 --- a/internal/tailwind-config/src/theme.css +++ b/internal/tailwind-config/src/theme.css @@ -380,6 +380,13 @@ @apply hidden; } } + + /* Tailwind v4 Preflight 不再为 button 默认设置 pointer;见官方升级说明: + * https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */ + button:not(:disabled), + [role='button']:not(:disabled) { + @apply cursor-pointer; + } } /* Custom utilities (v4 @utility syntax) */ @@ -396,33 +403,36 @@ 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; -} +/* Tailwind v4 的 utilities 在 @layer 内;组件样式若留在 layer 外(unlayered),会按层叠规则压过 py-4 等工具类。 + * 见:https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layering */ +@layer components { + .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::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 { + @apply outline-primary outline-2; + } -.outline-box.outline-box-active::after { - display: none; -} + .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; -} + .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; -} + .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; + .card-box { + @apply bg-card text-card-foreground border-border rounded-xl border; + } } /* Enter animations (converted from enterAnimationPlugin) */ diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts index d02877518..0213f2ff8 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts +++ b/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts @@ -1,7 +1,7 @@ import { cva } from 'class-variance-authority'; export const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', { defaultVariants: { size: 'default',