Skip to content

fix(tailwind): support boolean data-selected attribute from Base UI#11040

Open
codewithsupra wants to merge 1 commit into
shadcn-ui:mainfrom
codewithsupra:fix/data-selected-boolean-attribute-support
Open

fix(tailwind): support boolean data-selected attribute from Base UI#11040
codewithsupra wants to merge 1 commit into
shadcn-ui:mainfrom
codewithsupra:fix/data-selected-boolean-attribute-support

Conversation

@codewithsupra

Copy link
Copy Markdown

Problem

@custom-variant data-selected in packages/shadcn/src/tailwind.css only matched [data-selected="true"], but Base UI sets data-selected as a boolean attribute (bare presence, no value) — not as ="true".

This means data-selected:font-medium and similar utilities had no effect on Base UI's Combobox, Select, and other components that use the attribute selector.

All other @custom-variant definitions in this file already handle both forms:

Variant Boolean form
data-checked [data-checked]:not([data-checked="false"])
data-disabled [data-disabled]:not([data-disabled="false"])
data-active [data-active]:not([data-active="false"])
data-selected ❌ only [data-selected="true"]this PR

Fix

 @custom-variant data-selected {
-  &:where([data-selected="true"]) {
+  &:where([data-selected="true"]),
+  &:where([data-selected]:not([data-selected="false"])) {
     @slot;
   }
 }

This matches the exact same pattern used by data-checked, data-disabled, and data-active.

Fixes #11038

@vercel

vercel Bot commented Jun 28, 2026

Copy link
Copy Markdown
Contributor

@codewithsupra is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@codewithsupra codewithsupra force-pushed the fix/data-selected-boolean-attribute-support branch from a7bb712 to ac32e65 Compare June 29, 2026 17:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant