HTML & CSS · Middle · Question 74 of 75
How do you style an element based on a data-state attribute in Tailwind?
<div data-state="open" class="data-[state=open]:bg-zinc-100">...</div>- ✓Correct answer: With the
data-[...]variant - 2Tailwind can't target data attributes
- 3With
state-open:bg-zinc-100
Explanation
Headless UI libraries (Radix, Headless UI) expose state via data-* and ARIA attributes, so data-[state=open]: and aria-expanded: variants style them without extra classes.