跳到主要内容

Tailwind v4 CSS 变量任意值类语法迁移（WEB-1108）

版本： 0.4.6 · 类型： 🐛 缺陷修复

WEB-1108

问题​

消费 @plaud/design 的 Tailwind v4 项目在 max-height、transform-origin 和视口尺寸工具类上出现静默失效，构建无报错，class 仅仅不生效。

根本原因： Tailwind v4 修改了 CSS 变量任意值的语法。方括号写法 xxx-[--radix-yyy] 在 v4 中生成裸 CSS 变量作为值（无效），而括号写法 xxx-(--radix-yyy) 生成 var(--radix-yyy)（正确）。Tailwind v3 两种写法均可接受，v4 仅接受括号写法。

改动文件​

  • packages/design/src/components/ui/popover.tsx
  • packages/design/src/components/ui/hover-card.tsx
  • packages/design/src/components/ui/tooltip.tsx
  • packages/design/src/components/ui/navigation-menu.tsx
  • packages/design/src/components/ui/dropdown-menu.tsx
  • packages/design/src/components/ui/context-menu.tsx
  • packages/design/src/components/ui/menubar.tsx
  • packages/design/src/components/ui/select.tsx

改动内容​

将上述八个 ui 原语中所有 xxx-[--radix-yyy] 模式替换为 xxx-(--radix-yyy)。无行为变更，纯语法迁移以兼容 v4。