VARIANTS · COMPLETE IN 0.2
Conditional variants
Apply utilities only when a media feature, browser capability, container size, or starting-style condition matches—without adding runtime JavaScript.
Every documented condition is registry-backed and tested. Unsafe at-rule fragments are rejected, and named container queries use the same breakpoint tokens as responsive design.
QUICK REFERENCE
Conditional syntax
Place a conditional variant before any supported utility. Stack it with state, context, responsive, or selector variants when multiple conditions must hold.
motion-safe:co-*@media (prefers-reduced-motion: no-preference)pointer-fine:co-*@media (pointer: fine)supports-[display:grid]:co-*@supports (display:grid)not-supports-[display:grid]:co-*@supports not (display:grid)@md:co-*@container (width >= 48rem)@md/sidebar:co-*@container sidebar (width >= 48rem)starting:co-*@starting-style[@media(pointer:fine)]:co-*@media (pointer:fine)LIVE EXAMPLE · MEDIA FEATURES
See which environment conditions currently match
Dark tiles are active in your current browser environment. Change the operating-system motion preference, rotate the device, or switch pointer type to see the generated conditions react without JavaScript.
<div class="motion-safe:co-bg-black motion-safe:co-text-white">Motion safe</div>
<div class="motion-reduce:co-bg-black motion-reduce:co-text-white">Reduced motion</div>
<div class="pointer-fine:co-bg-black">Fine pointer</div>
<div class="pointer-coarse:co-bg-black">Coarse pointer</div>
<div class="portrait:co-block landscape:co-hidden">Portrait</div>LIVE EXAMPLE · FEATURE QUERIES
Enhance when a CSS capability exists
This preview uses Grid when supported and retains a Flexbox fallback. The supports and not-supports variants let one template express both paths.
<section class="co-flex supports-[display:grid]:co-grid supports-[display:grid]:co-grid-cols-[1.4fr_.8fr_.8fr]">
...
</section>
<p class="not-supports-[display:grid]:co-block supports-[display:grid]:co-hidden">
Flex fallback active
</p>INTERACTIVE EXAMPLE · CONTAINER QUERIES
Resize the component, not the browser
Drag the lower-right edge of the outlined container. At 30rem the cards change from one column to two based on local available space.
<aside class="co-container-inline-size">
<div class="co-grid co-grid-cols-1 @min-[30rem]:co-grid-cols-2">
<article>Primary</article>
<article>Secondary</article>
</div>
</aside>
<!-- named ancestor -->
<aside class="co-container-inline-size co-container-name-[sidebar]">
<div class="@md/sidebar:co-grid-cols-2">...</div>
</aside>INTERACTIVE EXAMPLE · STARTING STYLE
Animate content from its first rendered state
Open and close the disclosure to replay the entry. The starting variant emits @starting-style, while transition-discrete allows display to join the transition.
<div class="co-opacity-100 co-transition co-transition-discrete starting:co-opacity-0 starting:-co-translate-y-2">
Newly mounted content
</div>RESPONSIVE EXAMPLE · ARBITRARY AT-RULE
Express a safe condition outside the registry
This card group changes at a literal 40rem media condition. Coordiation accepts bracketed @media, @supports, and @container rules while rejecting declaration blocks and unknown at-rules.
<div class="co-grid [@media(width>=40rem)]:co-grid-cols-3">
...
</div>
<div class="[@supports(display:grid)]:co-grid">...</div>
<div class="[@container(width>30rem)]:co-flex">...</div>COMPOSITION EXAMPLE · STACKED CONDITIONS
Require multiple conditions in a predictable order
Hover this card on a hover-capable browser. The enhancement requires Grid support and hover capability, while reduced-motion removes its transition.
<article class="supports-[display:grid]:pointer-fine:hover:co-bg-black supports-[display:grid]:pointer-fine:hover:co-text-white motion-reduce:co-transition-none">
Conditionally enhanced
</article>AI GENERATION CONTRACT
Generate verifiable conditions
Agents can inspect conditionalVariantRegistry, query /api/capabilities, and validate final classes with compileCandidates().
- Prefer registered media names and named breakpoint tokens.
- Emit the container type and name on an ancestor before emitting a named container variant.
- Keep the entire class literal so the scanner can discover the
@variant. - Use arbitrary at-rules only for conditions not represented by the registry.
- Report every rejected candidate instead of guessing a replacement.