Utilities

Page scaffolding helpers and semantic border utilities.

Utility helpers

.flex-between

Updated 2 minutes ago

<div class="flex-between">
  <div>...</div>
  <button class="btn btn-secondary btn-sm">Edit</button>
</div>

.center-page

Use for empty states, login views, and focused workflows.

<div class="center-page">
  <div class="card card-sm">...</div>
</div>

.page-shell

Apply .page-shell to your app root so pages stretch to the viewport and keep footers pinned to the bottom.

<div class="page-shell">
  <header>...</header>
  <main class="center-page">...</main>
  <footer>...</footer>
</div>

Semantic border colors — pair with Tailwind utilities for full component styling.

border-primary

border-secondary

border-muted

border-light

border-success

border-info

border-warning

border-danger

border-dark

<div class="border-primary">...</div>
<div class="border-secondary">...</div>
<div class="border-muted">...</div>