Summary
Fifteen components dim a colour with bg-opacity-* / text-opacity-*, the Tailwind v3 syntax removed in v4. It generates no CSS, so the opacity is simply not applied and the colour renders fully opaque.
The most visible case is DialogBackdrop: every dialog built from the library's own parts covers the page in solid black instead of a translucent scrim.
Evidence
packages/components/src/ui/dialog/DialogBackdrop.stx:
<div class="fixed inset-0 bg-black bg-opacity-25 dark:bg-opacity-50 transition-opacity" aria-hidden="true" />Measured in the browser with that dialog open:
getComputedStyle(backdrop).backgroundColor // "rgb(0, 0, 0)"
getComputedStyle(backdrop).opacity // "1"
// no rule containing "bg-opacity-25" exists in any stylesheetSo the page behind the dialog disappears entirely.
For contrast, Drawer.stx uses the v4 slash syntax — bg-gray-500/75 dark:bg-gray-900/75 — and measures oklch(0.21 0.034 264.665 / 0.75). Correct. The two components disagree with each other.
Scope
19 uses across 15 files:
ui/dialog/DialogBackdrop.stx ui/dropdown/DropdownButton.stx
ui/dropdown/DropdownItems.stx ui/popover/PopoverButton.stx
ui/popover/PopoverPanel.stx ui/listbox/ListboxButton.stx
ui/listbox/ListboxOptions.stx ui/combobox/ComboboxInput.stx
ui/combobox/ComboboxOptions.stx ui/command-palette/CommandPalette.stx
ui/notification/Notification.stx ui/radio-group/RadioGroup.stx
ui/radio-group/RadioGroupOption.stx ui/badge/Badge.stx
ui/payment/DefaultPaymentMethod.stxSuggested fix
Mechanical: bg-black bg-opacity-25 → bg-black/25, dark:bg-opacity-50 → dark:bg-black/50, and the same for the text-/ring-/border- variants. Drawer.stx is the model.
Environment
@stacksjs/components0.2.339, stacks 0.75.31, Crosswind- Found while migrating hq.training onto the component library.