Matches when ANY descendant has focus — perfect for field wrappers.

Example#

html
<label class="flex border rounded-lg focus-within:ring-2 focus-within:ring-blue-500">
  <span class="px-3 py-2 bg-slate-100">$</span>
  <input class="flex-1 px-2 py-2 outline-none" placeholder="Amount" />
</label>

Stacking#

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

Best practices#

  • Field-group highlighting without JS

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