Match ARIA state or data attributes.

Example#

html
<button aria-expanded="true" class="aria-expanded:bg-blue-50">Menu</button>
<div data-state="open" class="data-[state=open]:block hidden">

Stacking#

Prefix order is screens → variants → utility. These variants combine with every screen (xxs: xs: sm: md:…) and with each other.

Best practices#

  • Style by semantic state, not JS class juggling
  • aria-hidden:, aria-selected:, data-[anything]:

variants/index|Variants hub · responsive/index|Responsive · utilities/index|Utilities