Utilities

Atomic utility classes in @layer zazz.utilities, zero-specificity architecture, and composition variables.

Utilities in Zazz are atomic classes declared in @layer zazz.utilities. They override component styles by layer position and are wrapped in :where() for zero specificity.

Loading components…

<article  class="flex flex-col gap-md w-full max-w-xl bg-card text-card-foreground border rounded-lg shadow-md p-lg">  <div class="flex items-center justify-between gap-sm">    <span class="ui-badge" data-variant="primary">Utilities</span>    <span class="text-xs text-muted-foreground tabular-nums">12 groups</span>  </div>  <hgroup class="flex flex-col gap-xs">    <h3 class="text-lg font-heading">Composed from atoms</h3>    <p class="text-sm text-muted-foreground text-pretty">      No component class here — just flex, gap, padding, radius, border, shadow, and color utilities      reading the same semantic tokens.    </p>  </hgroup>  <div class="flex items-center gap-sm pt-sm border-t">    <button type="button" class="ui-button" data-variant="primary">Get started</button>    <button type="button" class="ui-button" data-variant="ghost">Browse groups</button>  </div></article>

Rules

Layer precedence: Layer order is variables, reset, legacy, zazz.components, zazz.utilities, migrations. Utilities override component styles without !important.
Zero specificity: Each rule uses :where(.utility) { ... } with (0,0,0) specificity so custom selectors can override them easily.

Utility families

Group	Coverage
Layout	display, position, overflow, z-index, aspect-ratio, object-fit, order, container bands
Flexbox, Grid, Gap & basis	containers, alignment, spans, subgrid, gaps, basis fractions
Spacing, Sizing	padding, margin, negative margins, width, height, size, min/max constraints
Text color, Text & font	role colors, text alignment, transform, wrap, clamp, font families
Backgrounds, Borders	surface colors, overlays, borders, border-radius
Effects, Color opacity	shadows, opacity, scale, transitions, channel-specific alpha
Interactivity, Hover states	cursor, focus ring, screen readers, `hover:` variant prefixes
Responsive design	`@xs:`, `@sm:`, `@md:`, `@lg:`, `@xl:` container query prefixes

Internal composition and coordination variables

Non-inheriting composition variables

Padding, margin, radius, and color-alpha utilities use @property-registered variables with inherits: false. Setting an edge or channel on an element does not leak into child elements:

/* Shared composing rule */
:where(.p-0, .p-xs, .p-sm, .p-md, .p-lg, .p-xl, [class*="px-"], [class*="pl-"], [class*="pr-"]) {
  padding-inline: var(--_padding-inline-start) var(--_padding-inline-end);
}

/* Side utility sets only its target variable */
:where(.pl-0) {
  --_padding-inline-start: 0;
}

Variable	Syntax	Initial	Managed by
`--_padding-{inline,block}-{start,end}`	`<length-percentage>`	`0`	`p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-*`
`--_margin-{inline,block}-{start,end}`	`<length-percentage> \| auto`	`0`	`m-`, `mx-`, `my-`, `mt-`, `-m-*`, `mx-auto`
`--_radius-{top-left,top-right,bottom-right,bottom-left}`	`<length-percentage>`	`0`	`rounded-`, `rounded-t-`, `rounded-tl-*`
`--_text-alpha`, `--_background-alpha`, `--_border-alpha`	`<number>`	`1`	`text-opacity-`, `bg-opacity-`, `border-opacity-*`

Inheriting coordination variables

Unregistered variables that pass layout settings from container to children:

Variable	Default	Set by	Consumed by
`--_gap`	`0px`	`gap-*`	`basis-1/2` to `basis-1/6`, auto-fill grid
`--_gap-x`, `--_gap-y`	None	`gap-x-`, `gap-y-`	`column-gap`, `row-gap`
`--_grid-cols`, `--_grid-rows`	`1`	`grid-cols-N`, `grid-rows-N`	`col-span-`, `row-span-`, auto-fill grid
`--_grid-col-min`	`min(100%, 25ch)`	`.grid`	`grid-flow-row` auto-fill floor

Responsive and state prefixes

Layout utilities support @xs: to @xl: container query prefixes. Color, opacity, and scale utilities support hover: prefixes.

<div class="flex flex-col @md:flex-row gap-md">
  <aside class="@md:basis-1/3">Sidebar</aside>
  <main class="flex-1 hover:bg-muted transition">Content</main>
</div>