Stack Variants
Chain prefixes on one utility, and every condition must hold.
<button type="button" className="bg:indigo @sm:h:bg:red">Hover me</button>
The background changes on hover, and only above 40rem.
Order Does Not Matter
@sm:h:bg:red & h:@sm:bg:red compile to the same rule.
Pick one order & keep to it. Both class names generate their own rule, so mixing them across a project ships the same declaration twice.
Useful Combinations
Media Query & Pseudo Class
The most valuable pairing. Hover is unreliable on touch, so gating a hover style behind a breakpoint is a normal thing to want.
<a href="/docs" className="c:blue @lg:h:td:u">Documentation</a>
@pc: composes the same way, which lets you target coarse pointers directly instead of inferring them from width.
<button type="button" className="p:4 bg:indigo @pc:a:bg:indigo-7">Tap me</button>
Pseudo Class & Pseudo Element
<p className="h:s::bg:indigo">Hover this text, then select it.</p>
Media Query & Pseudo Element
<input className="@sm:p::c:silver" placeholder="Enter your email…" />
Opacity On Top
An opacity modifier is a suffix rather than a prefix, so it combines with any stack.
<div className="@sm:h:bg:red/50 …"></div>
At-Rules Nest
A class can carry several at-rules, such as a breakpoint & @prm:. Each wraps the next.
<div className="tp:o tdu:150 @md:@st:o:0"></div>
@sm:@lg:bg:red applies only from 64rem, so write @lg:bg:red.
Two Pseudo Classes
Two pseudo classes must both match: f:h:bg:red applies only while focused and hovered.
That is a different rule from styling either state, not a shorter way of writing it. Pick the one that says what you mean.
<button type="button" className="f:h:bg:red">Both at once</button><button type="button" className="f:bg:red h:bg:red">Either one</button>