Utility Classes

Aihu's css-engine ships a focused Tailwind-v4 utility subset compiled at build time into per-component scoped CSS. This page is the authoritative index of every supported class, every variant, every brand token, and a "Not yet supported" callout so you know when to drop to arbitrary values or open an issue.

#At a glance

• Compiled by @aihu/css-engine from .aihu SFCs.
• Output is scoped CSS (shadow DOM by default, light DOM via shadowMode: 'light').
• Unknown classes are silently dropped — there is no "JIT" and no global utility sheet.
• Conflict resolution (cn()) is last-wins per property group.

#Class index by family

#Layout (display, position, overflow)

#Flex & Grid alignment

#Grid templating

N is any positive integer.

#Spacing (padding, margin, gap, space-x/y)

Spacing uses the Tailwind scale: each unit is 0.25rem (so p-4 → 1rem), plus px → 1px and 0 → 0.

space-x/y-* emit Tailwind's standard sibling-margin recipe as a nested rule (no margin on the first child; the gap lands on every following sibling).

#Position scale (top/right/bottom/left/inset)

Inset utilities use the same Tailwind spacing scale as padding/margin (each unit 0.25rem, 0 → 0), plus the auto keyword. Prefix the class with - for negative offsets (-top-4 → top: -1rem;). inset- sets all four sides; inset-x- / inset-y-* set the logical inline / block pairs.

N is any spacing-scale step (e.g. 0, 2, 4, 0.5). Arbitrary values still work for one-offs: top-[3px], inset-[10%].

#Sizing (width, height, min/max)

Named max-w-* scale: xs 20rem, sm 24rem, md 28rem, lg 32rem, xl 36rem, 2xl 42rem, 3xl 48rem, 4xl 56rem, 5xl 64rem, 6xl 72rem, 7xl 80rem.

#Typography

#Leading & tracking scale

Named line-height (leading-) and letter-spacing (tracking-) scales, matching the Tailwind v4 defaults. leading-<n> (numeric) maps to the spacing scale (leading-6 → 1.5rem); the named steps are unitless multipliers. Arbitrary values still work: leading-[1.4], tracking-[.2em].

#Colors (bg, text, border, fill, stroke, ring, outline)

bg-, text-, border-, fill-, stroke- accept both brand tokens (see below) and the palette (bg-red-500, text-slate-700, bg-white). Brand-token classes emit var(--color-).

#Borders (width incl. directional, radius, color)

#Divide (sibling borders)

Borders between adjacent children, reusing the same nested & > * + * recipe as space-x/y. The bare form defaults to 1px.

Set the border color on the same element with the standard color utilities (e.g. border-muted). The -reverse tokens keep Tailwind's API surface via the --tw-divide-{x,y}-reverse custom property.

#Effects

#Ring

A focus ring drawn as a box-shadow composed from --tw-ring- custom properties (the Tailwind v4 recipe), so the ring width, color, and offset are set independently and layer with a regular shadow-.

The width side (ring-{n}) and the color side (ring-<color>) are complementary — use them together, e.g. focus:ring-2 ring-blue-500. The color path is unchanged; ring-blue-500, ring-primary, ring-ring etc. still emit --tw-ring-color.

#Z-index

z-0, z-10, z-20, z-30, z-40, z-50, z-auto → z-index: …;.

#Motion

Motion utilities cover transforms, transitions, and animations. Each transform utility (translate-, rotate-, scale-*) emits a single transform: declaration rather than composing CSS variables — so within one element the CSS cascade applies last-wins per family. To combine transforms (e.g. translate and rotate) on one element, use an arbitrary value (transform-[...] is not yet wired; compose with a custom @style rule).

#transform / translate

translate-* uses the spacing scale (translate-x-2 → 0.5rem). The leading - produces the negative form.

#rotate / scale

#transition / duration / ease

#animate

This is only the original five — the animate- family has grown well past this list (fade/slide-in variants, flips, 90°/180°/360° rotations, zoom in/out, jelly, tada, heartbeat, blink, and more). Each animate- (except animate-none) emits its @keyframes block as a top-level sibling rule alongside the class rule — keyframes cannot be nested inside a selector body. Re-emitting an identical block is idempotent in CSS.

#Variants

• Web-Component-native: host:, slotted:, slotted-<tag>:, part-<name>:, host-context-<name>:
• Pseudo: hover:, focus:, focus-visible:, active:, disabled:, visited:, checked:
• Responsive (min-width): sm: 40rem, md: 48rem, lg: 64rem, xl: 80rem, 2xl: 96rem (override via @theme)
• Dark mode: dark: (Firefox-safe [data-theme="dark"] / .dark cascade)
• Arbitrary selectors: [&>li]:, [&:has(img)]:, etc.
• Stacking: md:hover:bg-primary — left-to-right composition

#aria-/data- attribute variants

Gate a utility on an ARIA state or a data-* attribute. The variant compiles to an attribute selector appended to the class.

aria-expanded:bg-accent      →  .aria-expanded\:bg-accent[aria-expanded="true"] { background-color: var(--color-accent); }
data-[state=open]:underline  →  .data-\[state\=open\]\:underline[data-state="open"] { text-decoration-line: underline; }

Any aria-/data- variant whose base utility is unknown emits nothing — there is no spurious empty rule.

#Container queries (@container)

Mark an element as a query container with @container (or the named @container/<name> form), then size descendants with the @sm:/@md:/@lg:/@xl:/@2xl: container-query variants. These wrap the rule in an @container at-rule rather than @media, and use Tailwind's container-query scale (which differs from the viewport breakpoint scale).

<div class="@container">
  <div class="@md:flex">…</div>   →  @container (min-width: 28rem) { .\@md\:flex { display: flex; } }
</div>

#Brand tokens (24)

Override any token in a component's @style block via @theme { --color-primary: oklch(...); }.

The last four pairs (info, success, warning, neutral) are semantic-state tokens added after the original 16-token set — the count above (24) reflects both generations. Use as bg-primary, text-accent, border-muted, ring-ring, bg-success, etc.

#Palette

22 color families × 11 shades (50–950), matching the Tailwind v4 palette (e.g. bg-red-500, text-slate-700, border-zinc-200). Note that neutral is both a bare brand token (above) and a full 11-shade palette family — they're distinct code paths, so bg-neutral and bg-neutral-500 resolve differently. See the Tailwind v4 color palette for the full swatch list.

#Arbitrary values

Use prefix-[value] to bypass the scale for: bg, text, w, h, min-w, max-w, min-h, max-h, p, px, py, m, mx, my, gap, rounded, border, leading, tracking, z, top, right, bottom, left, inset, fill, stroke, shadow.

bg-[#1a1d24]   →  background-color: #1a1d24;
w-[34ch]       →  width: 34ch;
top-[1rem]     →  top: 1rem;

#Not yet supported

The following are deliberately out of scope today. Most have an arbitrary-value workaround; the rest require variant-parser changes. Open an issue if you need one promoted.

• Arbitrary at-rules beyond @media / @container (e.g. @supports)

#Worked examples

One input → output pair per notable family.

#space-y-4 (Spacing)

<ul class="space-y-4"> … </ul>

.space-y-4 { & > * + * { margin-block-start: 1rem; } }

#divide-y-2 (Divide — sibling borders)

<ul class="divide-y-2 border-muted"> … </ul>

.divide-y-2 { & > * + * { border-block-width: 2px; } }

#mx-auto (Margin auto)

<div class="mx-auto"> … </div>

.mx-auto { margin-inline: auto; }

#max-w-7xl (Named max-width)

<section class="max-w-7xl"> … </section>

.max-w-7xl { max-width: 80rem; }

#grid-cols-3 (Grid templating)

<div class="grid grid-cols-3 gap-4"> … </div>

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#border-t-4 (Directional border width)

<div class="border-t-4"> … </div>

.border-t-4 { border-top-width: 4px; }

#absolute top-4 right-4 (Position scale)

<button class="absolute top-4 right-4"> … </button>

.top-4 { top: 1rem; }
.right-4 { right: 1rem; }

#leading-relaxed (Line-height scale)

<p class="leading-relaxed"> … </p>

.leading-relaxed { line-height: 1.625; }

#tracking-wide (Letter-spacing scale)

<h1 class="tracking-wide"> … </h1>

.tracking-wide { letter-spacing: 0.025em; }

#ring-2 ring-blue-500 (Ring width + color)

<button class="focus:ring-2 ring-blue-500"> … </button>

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-blue-500 { --tw-ring-color: var(--color-blue-500); }

#ring-offset-2 (Ring offset width)

<div class="ring-2 ring-offset-2"> … </div>

.ring-offset-2 { --tw-ring-offset-width: 2px; }

#hover:scale-105 + transition-transform (Motion)

<button class="transition-transform duration-300 hover:scale-105"> … </button>

.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.hover\:scale-105:hover { transform: scale(1.05); }

#animate-spin (Animation with hoisted keyframes)

<div class="animate-spin"> … </div>

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#aria-expanded: (attribute variant)

<button class="aria-expanded:bg-accent"> … </button>

.aria-expanded\:bg-accent[aria-expanded="true"] { background-color: var(--color-accent); }

#@container + @md: (container query)

<div class="@container">
  <div class="@md:flex"> … </div>
</div>

.\@container { container-type: inline-size; }
@container (min-width: 28rem) {
  .\@md\:flex { display: flex; }
}

#See also

• Authoring Components — how @style composes with utility classes
• API Reference — @aihu/css-engine export tables