Nested Variants

Variants stack. Chain their prefixes on a single utility & every condition has to hold for the declaration to apply.

<button type="button" class="bg-indigo @sm:h:bg-red">Hover me</button>

@media (min-width: 40rem) {
  .\@sm\:h\:bg-red:hover {
    background-color: #e63946;
  }
}

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" class="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" class="p-4 bg-indigo @pc:a:bg-indigo-7">Tap me</button>

Pseudo Class & Pseudo Element

<p class="h:s::bg-indigo">Hover this text, then select it.</p>

.h\:s\:\:bg-indigo:hover::selection {
  background-color: #6366f1;
}

Media Query & Pseudo Element

<input class="@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 class="@sm:h:bg-red/50 …"></div>

@media (min-width: 40rem) {
  .\@sm\:h\:bg-red\/50:hover {
    background-color: color-mix(in srgb, #e63946 50%, transparent);
  }
}

Two Media Queries Do Not Stack

A breakpoint is a min-width, so two of them describe one range with a single lower bound. Yumma CSS keeps the last prefix in the chain & silently drops the rest.

<div class="@sm:@lg:bg-red …"></div>

@media (min-width: 64rem) {
  .\@sm\:\@lg\:bg-red {
    background-color: #e63946;
  }
}

@sm is gone & nothing warns you. Write the breakpoint 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.

<button type="button" class="f:h:bg-red">Both at once</button><button type="button" class="f:bg-red h:bg-red">Either one</button>