Tailwind Migration Guide

Tailwind → Airframe Cheat Sheet

Quick translation guide for Tailwind users. Same speed, cleaner markup. Class mappings apply to both Tailwind v3 and v4.

Layout Recipes (Utility Reduction)

Flexbox

Tailwind	Airframe	Notes
`flex flex-col gap-4`	`af-stack af-gap-lg`	Vertical stack
`flex flex-col gap-2`	`af-stack af-gap-sm`	Small gap
`flex flex-col gap-6`	`af-stack af-gap-xl`	Large gap
`flex flex-wrap items-center gap-4`	`af-cluster af-gap-lg`	Default semantic cluster
`flex flex-wrap items-center gap-4` (explicit)	`af-inline af-items-center af-gap-lg`	Explicit utilities
`flex items-center justify-between`	`af-spread`	Default semantic spread
`flex items-center justify-between` (explicit)	`af-inline af-items-center af-justify-between`	Explicit utilities
`flex items-center justify-center`	`af-center`	Default semantic center
`flex items-center justify-center` (explicit)	`af-inline af-items-center af-justify-center`	Explicit utilities

Grid

By default: af-grid adjusts to the number of children. No need to specify column counts for equal columns.

Tailwind	Airframe	Notes
`grid grid-cols-2 gap-4`	`af-grid af-gap-lg`	Auto-adjusts to 2 columns (simple default)
`grid grid-cols-3 gap-4`	`af-grid af-gap-lg`	Auto-adjusts to 3 columns (simple default)
`grid grid-cols-4 gap-4`	`af-grid af-gap-lg`	Auto-adjusts to 4 columns (simple default)
`grid grid-cols-2 gap-4` (explicit)	`af-grid-2 af-gap-lg`	Explicit 2 columns
`grid grid-cols-3 gap-4` (explicit)	`af-grid-3 af-gap-lg`	Explicit 3 columns
`grid grid-cols-4 gap-4` (explicit)	`af-grid-4 af-gap-lg`	Explicit 4 columns
`grid grid-cols-5 gap-4`	`af-grid-5 af-gap-lg`	5 columns
`grid grid-cols-6 gap-4`	`af-grid-6 af-gap-lg`	6 columns
`grid grid-cols-12 gap-4`	`af-grid af-gap-lg`	12-column grid (auto-detected when children have spans)
`col-span-12 md:col-span-8`	`af-col-span-8@md`	Asymmetric layout (full width is default)
`col-span-12 lg:col-span-4`	`af-col-span-4@lg`	Asymmetric layout (full width is default)

Responsive

Tailwind	Airframe	Notes
`md:grid-cols-3`	`af-grid-3@md`	Responsive grid
`lg:flex-row`	`af-inline@lg`	Responsive layout
`sm:hidden`	`af-hidden@sm`	Responsive hide
`md:block`	`af-block@md`	Responsive show

Spacing

Tailwind	Airframe	Notes
`p-4`	`af-p-lg`	Padding large
`p-2`	`af-p-sm`	Padding small
`p-6`	`af-p-xl`	Padding XL (24px)
`p-8`	`af-p-2xl`	Padding 2XL (32px)
`gap-4`	`af-gap-lg`	Gap large
`gap-2`	`af-gap-sm`	Gap small
`gap-6`	`af-gap-xl`	Gap XL (24px)
`gap-8`	`af-gap-2xl`	Gap 2XL (32px)
`mx-auto`	`af-mx-auto`	Auto inline margin

Typography

Tailwind	Airframe	Notes
`text-sm`	`af-text-sm`	Small text
`text-lg`	`af-text-lg`	Large text
`text-gray-500`	`af-text-muted`	Muted text
`font-mono`	`af-text-mono`	Monospace
`tabular-nums`	`af-numeric`	Tabular numbers

Component Tokens (Overrides)

Use component tokens to customize controls without new classes.

<style>
  :root { --af-control-min-height: 3rem; --af-btn-gap: 0.75rem; --af-input-placeholder-color: rgba(0, 0, 0, 0.45); }
</style>
<button class="af-btn">
  Primary
</button>
<input class="af-input" placeholder="Custom input" />

Common Patterns

Card Layout

<!-- Tailwind -->
<div class="bg-white rounded-lg p-4 border border-gray-200">
  <h2 class="text-xl font-semibold mb-2">
    Title
  </h2>
  <p class="text-gray-600">
    Content
  </p>
</div>
<!-- Airframe -->
<div class="af-card">
  <h2 class="af-card__title">
    Title
  </h2>
  <p class="af-card__body">
    Content
  </p>
</div>

Responsive Grid (Equal Columns - Recommended)

<!-- Tailwind -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
  <div>
    Item 3
  </div>
</div>
<!-- Airframe -->
<div class="af-grid-1 af-grid-2@md af-grid-3@lg af-gap-lg">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
  <div>
    Item 3
  </div>
</div>

12-Column Grid (Asymmetric Layouts)

<!-- Tailwind -->
<div class="grid grid-cols-12">
  <div class="col-span-12 lg:col-span-8">
    Main
  </div>
  <div class="col-span-12 lg:col-span-4">
    Sidebar
  </div>
</div>
<!-- Airframe (12-column for asymmetric) -->
<div class="af-grid">
  <div class="af-col-span-8@lg">
    Main
  </div>
  <div class="af-col-span-4@lg">
    Sidebar
  </div>
</div>

Stack Layout

<!-- Tailwind -->
<div class="flex flex-col gap-4">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
</div>
<!-- Airframe -->
<div class="af-stack af-gap-lg">
  <div>
    Item 1
  </div>
  <div>
    Item 2
  </div>
</div>