Variants are prefixes that add a condition to a utility: hover:bg-blue-600 applies only on hover. v2 supports responsive prefixes plus a small state set.

The stacking order#

text
[screens] [conditions] utility
md: dark: group-hover: bg-blue-500
│    │      │            └─ what
│    │      └─ under what state
│    └─ under what scheme
└─ above what width

Families#

hoverThe workhorse interaction state.focus & focus-visibleKeyboard and mouse focus.darkScheme variants.
Tip. If you can say it in CSS, you can prefix it in Nakshora. Arbitrary variants [&>*]:p-2 cover everything else (3.x).