فهرست منبع

fix: tailwindcss config

dullathanol 2 ماه پیش
والد
کامیت
185011ee21
2فایلهای تغییر یافته به همراه32 افزوده شده و 22 حذف شده
  1. 31 21
      internal/tailwind-config/src/theme.css
  2. 1 1
      packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts

+ 31 - 21
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) */

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