Variants are prefixes that add a condition to a utility: hover:bg-blue-600 applies only on hover. v1 ships only responsive prefixes — state styling is component-baked.

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#

Responsive prefixesIn v1 the screens ARE the variants — state styling is component-baked.
Tip. If you can say it in CSS, you can prefix it in Nakshora. Arbitrary variants [&>*]:p-2 cover everything else (3.x).