Feature queries as variants.

Example#

html
<div class="supports-[backdrop-filter]:bg-white/50 bg-white">Progressive</div>

Stacking#

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

Best practices#

  • Progressive enhancement one-liners

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