Any selector as a variant: [&>*], [&:nth-child(3)].

Example#

html
<ul class="[&>li]:py-2 [&>li:nth-child(3)]:font-bold">
  <li>targeted</li>
</ul>

Stacking#

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

Best practices#

  • Escape hatch when no named variant fits

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