Skip to main content

Tailwind v4 CSS variable class syntax migration (WEB-1108)

Version: 0.4.6 ยท Type: ๐Ÿ› Bug Fix

WEB-1108

Problemโ€‹

Components consuming @plaud/design with Tailwind v4 experienced silent failures on max-height, transform-origin, and viewport sizing utilities. No build error was produced โ€” the classes simply had no effect.

Root cause: Tailwind v4 changed the syntax for CSS variable arbitrary values. The bracket form xxx-[--radix-yyy] generates [--radix-yyy] (a bare CSS variable as a value, invalid in v4), while the parenthesis form xxx-(--radix-yyy) generates var(--radix-yyy) (correct). Tailwind v3 accepted both; v4 only accepts the parenthesis form.

Changed Filesโ€‹

  • 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

Changesโ€‹

All xxx-[--radix-yyy] patterns replaced with xxx-(--radix-yyy) across the eight affected ui primitives. No behavior change โ€” purely a syntax migration for v4 compatibility.