Conditional blocks
Apply a Master CSS condition inside a native rule or managed definition.
@variant
Use @variant inside managed definitions or native style rules to share the current selector under a Master CSS condition.
.notice { @compose p-md r-lg; @dark { @compose bg-gray-90 fg-white; } @variant media((width<52.125rem)) { @compose p-sm; }}.notice { border-radius: var(--radius-lg); padding: var(--spacing-md)}@media (prefers-color-scheme:dark) { .notice:where(:root, :root *) { background-color: var(--color-gray-90) }}@media (prefers-color-scheme:dark) { .notice:where(:host, :host *) { background-color: var(--color-gray-90) }}@media (prefers-color-scheme:dark) { .notice:where(:root, :root *) { color: oklch(100% 0 none) }}@media (prefers-color-scheme:dark) { .notice:where(:host, :host *) { color: oklch(100% 0 none) }}@media (width<52.125rem) { .notice { padding: var(--spacing-sm) }}@layer theme { :root, :host { --radius-lg: .5rem; --spacing-md: 1rem; --color-gray-90: oklch(23.5% 0 none); --spacing-sm: .75rem }}Use @dark and @light as rule-local shorthands for those explicitly defined modes. Use @variant for other modes, custom variants, breakpoint names, and complete native queries such as media((width<52.125rem)). Unknown names are errors; numeric and feature shorthand inference is removed. These blocks are rule-local compiler directives, not native CSS at-rules or entry markers.
For selector states, write a nested selector such as &:hover directly. A selector can contain @variant when it also needs a condition. Define custom modes and variants before using them; @variant does not declare a new mode or condition. See Conditional queries for the condition grammar.