Comparison

Airframe vs. Bootstrap vs. Tailwind v4

How Airframe compares to two popular CSS systems. Tailwind notes reflect v4.

This is a positioning guide, not a scorecard. Each tool wins for different teams.

At a glance

	Airframe	Bootstrap 5.3+	Tailwind v4
Pre-built UI	CSS patterns (buttons, cards, forms, overlays…)	Full component library (many need JS)	None in core (ecosystem kits fill this)
Markup style	Intent classes (`af-stack`, `af-card`)	Component classes (`btn`, `card`)	Utility classes (`flex`, `gap-4`, `rounded-lg`)
Setup	Import CSS	Import CSS (or Sass)	Build step (PostCSS / Vite plugin)
Accessibility	Patterns aim for solid defaults; you still own AA	Generally strong on components	Mostly manual — you compose a11y yourself
Tokens	CSS variables (`--af-*`)	CSS variables (`--bs-*`) + Sass	CSS variables via `@theme`
Theming	Runtime token overrides, no rebuild	Runtime for many vars; Sass for deeper work	Runtime for existing theme vars; rebuild for new
Cascade layers	Yes	No	Yes
Layout model	Structural primitives	Grid/flex utilities + components	Utility-based
Bundle approach	Full import or selective pattern CSS	Full or partial Sass/CSS builds	On-demand utilities
AI / tooling	Ships rules, catalog, class reference	Docs + ecosystem	Docs + strong ecosystem

What the markup looks like

Same dashboard idea in each system. Airframe and Bootstrap read as structure; Tailwind reads as implementation detail.

<div class="af-container">
  <div class="af-stack af-gap-lg">
    <header class="af-spread">
      <h1>
        Dashboard
      </h1>
      <div class="af-inline af-gap-sm">
        <button class="af-btn">
          Export
        </button>
        <button class="af-btn">
          New
        </button>
      </div>
    </header>
    <div class="af-grid-1 af-grid-2@md af-grid-4@lg af-gap-lg">
      <div class="af-card">
        <h3 class="af-card__title">
          Users
        </h3>
        <p class="af-text-h2">
          1,234
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container mx-auto px-4">
  <div class="flex flex-col gap-6">
    <header class="flex items-center justify-between">
      <h1 class="text-2xl font-bold">
        Dashboard
      </h1>
      <div class="flex gap-2">
        <button class="px-4 py-2 bg-blue-600 text-white rounded">
          Export
        </button>
        <button class="px-4 py-2 bg-blue-600 text-white rounded">
          New
        </button>
      </div>
    </header>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="bg-white rounded-lg p-4 border border-gray-200">
        <h3 class="text-lg font-semibold mb-2">
          Users
        </h3>
        <p class="text-2xl font-bold">
          1,234
        </p>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="d-flex flex-column gap-4">
    <header class="d-flex align-items-center justify-content-between">
      <h1 class="h2 fw-bold">
        Dashboard
      </h1>
      <div class="d-flex gap-2">
        <button class="btn btn-primary">
          Export
        </button>
        <button class="btn btn-primary">
          New
        </button>
      </div>
    </header>
    <div class="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
      <div class="col">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">
              Users
            </h3>
            <p class="h2 fw-bold">
              1,234
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Setup

# Airframe
npm install @airframeui/core
# @import "@airframeui/core/core.css";

# Tailwind v4 — simpler than v3, still needs a build

npm install tailwindcss @tailwindcss/postcss
# Add the PostCSS plugin, @import "tailwindcss", run your bundler

# Bootstrap

npm install bootstrap
# Import CSS (deeper customization often still uses Sass)

Theming

/* Airframe — override tokens at runtime, no rebuild */
:root {
  --af-base-primary: #0066cc;
}

/* Tailwind v4 — @theme tokens become CSS variables */
@import "tailwindcss";
@theme {
  --color-primary: oklch(0.55 0.2 250);
}
/* Runtime override of existing theme vars works */
:root {
  --color-primary: #0066cc;
}
/* Adding new tokens/utilities still needs a rebuild */

/* Bootstrap 5.3+ — many theme vars are runtime CSS variables */
:root {
  --bs-primary: #0066cc;
}
/* Deeper structural changes still often go through Sass */

Airframe, Bootstrap 5.3+, and Tailwind v4 all expose theme values as CSS variables. Airframe’s difference is the whole system is built around that token layer with no required build step.

When to use each

Airframe — You want readable structure-first markup, CSS-only patterns, layout primitives, and token theming without a build pipeline.

Tailwind — You want maximum compositional freedom, utility-first design, and you’re fine with build tooling and denser markup.

Bootstrap — Your team already knows it, you want a mature component + JS ecosystem, and Bootstrap’s patterns fit the product.

Coming from another system? See the Tailwind cheat sheet or Bootstrap cheat sheet.

Ready to try Airframe? Get started