Utilities

Atomic helpers for fine-tuning without writing CSS. All use logical properties, so they are RTL-safe.

Layout

.flex .inline-flex .grid .inline-grid .block .inline-block .hidden
.flex-row .flex-col .flex-wrap .flex-1 .flex-none
.items-{start|center|end|stretch|baseline}
.justify-{start|center|end|between|around|evenly}
.grid-cols-{1..6,12}  .col-span-{1..12,full}

<div class="grid grid-cols-3 gap-2" style="inline-size:100%">
  <div class="card"><div class="card-body" style="padding:12px">1</div></div>
  <div class="card"><div class="card-body" style="padding:12px">2</div></div>
  <div class="card"><div class="card-body" style="padding:12px">3</div></div>
</div>

Spacing

.p-{0..8}  .px-* .py-* .pt-4 .pb-4
.m-{0,1,2,4} .m-auto .mx-auto .my-* .mt-* .mb-* .ms-auto .me-auto
.gap-{0..6,8,10,12}  .gap-x-* .gap-y-*

Sizing

.w-full .w-auto .w-fit .w-screen
.h-full .h-screen .min-h-screen
.max-w-{xs|sm|md|lg|xl|2xl|7xl}

Typography

.text-{xs|sm|base|lg|xl|2xl|3xl}
.font-{light|normal|medium|semibold|bold}
.text-{start|center|end|justify}  .leading-* .tracking-*
.uppercase .capitalize .truncate .font-mono

<div style="inline-size:100%">
  <p class="text-2xl font-bold mb-0">Display</p>
  <p class="text-sm text-muted mb-0">Muted caption</p>
  <p class="truncate" style="max-inline-size:220px">This very long line will be truncated with an ellipsis when it overflows its box.</p>
</div>

Colors

.text-{primary|muted|faint|success|warning|danger|info}
.bg-{bg|surface|surface-2|primary|soft}
.bg-{success|warning|danger|info}          /* solid */
.bg-{success|warning|danger|info}-soft     /* tinted */
.border .border-strong .border-{primary|success|warning|danger|info}

<span class="badge bg-success">bg-success</span>
<span class="badge bg-warning">bg-warning</span>
<span class="badge bg-danger">bg-danger</span>
<span class="badge bg-info">bg-info</span>
<span class="badge bg-success-soft">success-soft</span>
<span class="badge bg-danger-soft">danger-soft</span>

Radius, shadow & effects

.rounded-{none|sm|md|lg|full}
.shadow-{none|sm|md|lg}  .backdrop-blur
.opacity-{50|75}  .transition

<div class="bg-surface border rounded-lg shadow p-4">rounded-lg + shadow</div>
<div class="bg-surface border rounded-full p-4">rounded-full</div>

Position & misc

.relative .absolute .fixed .sticky  .inset-0 .top-0 .start-0 .end-0
.z-{10|20|30|50}  .overflow-{hidden|auto|x-auto}
.cursor-pointer .select-none .sr-only .aspect-square .aspect-video

Responsive prefixes

Mobile-first breakpoints. Prefix any layout utility: sm: 640px, md: 768px, lg: 1024px, xl: 1280px.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> … </div>

Covered per breakpoint: display, flex direction/wrap, items/justify, grid-cols-1..6,12, col-span-1..6,full, gap-*, and text alignment. Resize the window to see it react:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2" style="inline-size:100%">
  <div class="card"><div class="card-body" style="padding:12px">A</div></div>
  <div class="card"><div class="card-body" style="padding:12px">B</div></div>
  <div class="card"><div class="card-body" style="padding:12px">C</div></div>
  <div class="card"><div class="card-body" style="padding:12px">D</div></div>
</div>

Printing

A built-in print stylesheet makes any page print (or export to PDF) cleanly: components switch to a high-contrast, ink-friendly palette — white background, black text, no shadows, blur or gradients — regardless of the active data-style or dark mode, and purely interactive chrome (dropdown menus, toasts, spinners, drawers) is hidden. Two helpers give you control:

• .no-print — hide an element only when printing.
• .print-only — show an element only when printing.

External link targets are appended in parentheses so URLs survive on paper. Try your browser's print preview on any page.