Variants stack. Chain their prefixes on a single utility & every condition has to hold for the declaration to apply.
<button type="button" className="bg:indigo @sm:h:bg:red">Hover me</button>
The media query wraps the rule & the pseudo class lands on the selector, so the background changes on hover only above 40rem.
Order Does Not Matter
@sm:h:bg:red & h:@sm:bg:red compile to the same rule. Each prefix is resolved by what it is, not by where it sits in the chain.
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
Breakpoints, Container Queries, Starting Style & @prm: are all at-rules, and a class can carry more than one. Each wraps the next.
<div className="tp:o tdu:150 @md:@st:o:0"></div>
Two breakpoints nest the same way, but @sm:@lg:bg:red only ever applies from 64rem, since both have to hold. Write the one you mean, @lg:bg:red.
Two Pseudo Classes
Two pseudo classes compile to a selector that requires both at once, which is rarely the intent. f:h:bg:red produces :focus:hover, matching only an element that is focused and hovered in the same moment.
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>