Utilities

Find a utility

The reference groups every documented utility family by purpose. Each table shows the class pattern, accepted values and available variants.

• Motion
• Spacing
• Layout and stacking
• Grid containers
• Images and backgrounds
• Borders and outlines
• Typography
• Elevation
• Colors

Compose focused adjustments

A utility class changes one visual property or a small related set.

<article class="relative z-1 p-4 shadow-base bg-default-lightest">
  <h2 class="text-xl font-semibold leading-tight text-primary-dark">Project summary</h2>
  <p class="mt-2 mb-4 text-default-dark">Utilities make focused visual adjustments.</p>
  <button class="bg-primary hover:bg-primary-dark focus:outline-2 focus:outline-primary">
    Open project
  </button>
</article>

Constrain content width

Use container for the common fluid and centered page width. Combine max-w-* with mx-auto when an element needs a different limit. These classes add no padding.

<section class="container">
  <h2>Application content</h2>
  <p>The container stays fluid until it reaches the configured maximum width.</p>
</section>

<p class="max-w-prose mx-auto">
  This text measure stays readable and preserves its vertical margins.
</p>

Prefixes and special characters

Interactive variants place focus:, active: or hover: before a supported class. Color utilities also accept before: and after:. Fractional widths accept the responsive prefixes sm:, md:, lg: and xl:.

Colons and slashes appear directly inside the HTML class attribute. Authored CSS and DOM selectors use their escaped forms.

<div class="grid-gutters">
  <section class="w-6/12 md:w-4/12 xl:w-3/12 p-4">Responsive column</section>
</div>

Motion

Motion tokens give components shared timing semantics. Components transition only their documented properties and honor the user's reduced-motion preference.

Spacing

Spacing utilities read the shared spacing scale and apply one physical side or every side.

Layout and stacking

Layout utilities control positioning, stacking, fractional width and compact display behavior.

Grid containers

Grid classes create wrapping flex rows whose direct children start at full width.

Images and backgrounds

Media utilities control image fitting, focal position, background sizing and repetition.

Borders and outlines

Border and outline utilities separate width, style, offset and color for explicit composition.

Typography

Typography utilities control one font or text property and support interactive state variants.

Elevation

Elevation utilities use token-backed outer and inset shadows with interactive state variants.

Colors

Color utilities cover backgrounds, borders, outlines and text across every semantic family and weight.