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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: shadcn/tailwind.css custom-properties overrides already existing base-ui's properties styles

1 participant