BootstrapとTailwind CSSを比較する：CSSフレームワーク選定の観点

概要

CSSフレームワークを選ぶとき、BootstrapとTailwind CSSは必ずと言っていいほど比較対象になります。どちらも広く使われていますが、設計思想がまったく異なるため、「どちらが優れているか」ではなく「どちらがそのプロジェクトに合うか」で考えるべきものです。

この記事では、両者の思想の違いを整理したうえで、同じUIを両方のアプローチで書き比べ、選定時にどこを見るべきかの観点をまとめます。公開情報とドキュメントに基づく一般的な比較です（本記事はTailwind CSS v4系・Bootstrap 5.3系を前提にしています）。

前提：2つの思想の違い

まず両者の立ち位置を一言でまとめます。

• Bootstrap — コンポーネント志向。.btn、.card、.navbar のような「完成されたUI部品」をあらかじめ用意し、それを組み合わせて画面を作ります。
• Tailwind CSS — ユーティリティファースト。flex、pt-4、text-center のような「単機能のクラス」を組み合わせて、HTML上で直接スタイルを組み立てます。

Bootstrapは「よく使う部品が最初から揃っている箱」、Tailwindは「スタイルの部品を自分で組み立てるためのレゴ」と考えると分かりやすいです。

同じUIを書き比べる

ボタン

Bootstrapの場合、用意されたクラスを当てるだけで完成します。

<!-- Bootstrap -->
<button type="button" class="btn btn-primary">送信</button>

Tailwindの場合、見た目を構成する要素を一つずつ指定します。

<!-- Tailwind CSS -->
<button
  type="button"
  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
  送信
</button>

Bootstrapは短く書けますが、見た目は「Bootstrapらしさ」に寄ります。Tailwindは記述量が多いものの、色・余白・角丸をHTML上で完全にコントロールできます。

カード

<!-- Bootstrap -->
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">タイトル</h5>
    <p class="card-text">本文テキスト。</p>
    <a href="#" class="btn btn-primary">詳細</a>
  </div>
</div>

<!-- Tailwind CSS -->
<div class="w-72 rounded-lg shadow p-4 bg-white">
  <h5 class="text-lg font-bold mb-2">タイトル</h5>
  <p class="text-gray-600 mb-4">本文テキスト。</p>
  <a href="#" class="inline-block px-4 py-2 bg-blue-600 text-white rounded">
    詳細
  </a>
</div>

この比較から見えるのは、「デフォルトのデザインを受け入れる」か「デザインを自分で定義する」かという根本的な方向性の違いです。

カスタマイズの考え方

Bootstrap

Bootstrapはデフォルトのデザインが完成されている分、独自デザインに寄せようとすると既存スタイルの上書きが必要になります。公式が推奨するのはSassの変数を上書きする方法です。

// Bootstrapのカスタマイズ（Sass変数の上書き）
$primary: #4f46e5;
$border-radius: 0.5rem;

@import "bootstrap/scss/bootstrap";

変数で吸収できる範囲なら綺麗にカスタマイズできますが、デフォルトから大きく離れたデザインにしようとするほど、!important を使った力技や詳細度の戦いになりやすくなります。

Tailwind CSS

Tailwindは最初からデザインが「無い」ため、デザイントークン（色・余白・フォントなど）を自分で定義することが前提になります。v4ではこの設定をCSSファースト（CSS側）で行うのが既定で、@import "tailwindcss"; に続けて @theme ディレクティブでトークンを定義します。

/* Tailwind v4 のカスタマイズ（CSSファースト設定） */
@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --radius-card: 0.5rem;
}

@theme で定義した変数は、そのままCSSカスタムプロパティになると同時に、bg-brand や rounded-card といったユーティリティクラスとしても使えるようになります。

なお、v3以前は tailwind.config.js（module.exports + theme.extend）でトークンを定義する方式でした。v4ではCSSファースト設定が既定となり、JS設定ファイルは互換のためのオプションという位置づけに変わっています。既存プロジェクトを移行する場合は、この設定の持ち方の違いが最初の分かれ目になります。

デザインの「素の状態」から積み上げるため、独自デザインシステムとの相性が良い一方で、立ち上げ時に自分で設計する手間がかかります。

バンドルサイズ

Tailwindは、ビルド時にテンプレートを走査して実際に使われているクラスだけを残します。そのため、本番ビルドのCSSは非常に小さくなりやすいです。v4ではテンプレートファイルが自動的に検出される（自動コンテンツ検出）ため、v3のような content 配列の手動設定は原則不要になりました。

Bootstrapはデフォルトでは全コンポーネントのCSSを含むため、使っていない部分も読み込まれます。必要なモジュールだけSassでインポートすれば削減できますが、Tailwindの自動削除ほど手軽ではありません。

// Bootstrapで必要な部分だけ読み込む例
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";

JavaScriptコンポーネント

ここは見落としやすいですが重要な差です。

• Bootstrap — モーダル、ドロップダウン、トグル、カルーセルなどのJavaScript付きコンポーネントが同梱されています。素のHTMLでも動きます。
• Tailwind CSS — CSSのみです。インタラクティブな挙動は自前で書くか、Headless UIなどの別ライブラリを組み合わせる必要があります。

Reactなどのコンポーネント指向のフレームワークを使っている場合、挙動はそちら側で持つことが多いためTailwindと相性が良いです。逆に、素のHTMLでモーダルなどをすぐ動かしたいならBootstrapの同梱JSは強力です。

HTMLの見た目について

Tailwindへの代表的な批判が「クラスが大量に並んでHTMLが読みにくい」というものです。これは事実で、1要素に10個以上のクラスが並ぶことも珍しくありません。

ただし現実には、ReactやVueのコンポーネント化、あるいはTailwind自身の @apply によって緩和できます。

/* 繰り返すパターンを @apply でまとめる */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700;
}

もっとも、@apply を多用するとTailwindの「HTMLで完結する」という利点が薄れるため、コンポーネント分割で対応するほうが思想には合います。

選定観点のまとめ

観点	Bootstrap	Tailwind CSS
思想	コンポーネント志向	ユーティリティファースト
立ち上がりの速さ	速い（部品が揃っている）	やや手間（設定・設計が必要）
デザインの自由度	デフォルトに寄りやすい	高い
独自デザインシステム	上書きで対応	得意
JS付き部品	同梱	無し（別途用意）
バンドルサイズ	大きめ（削減は手動）	小さい（未使用クラス自動削除）
HTMLの可読性	高い	クラスが多く賛否あり
学習コスト	低め	ユーティリティ名を覚える必要

結論

• 管理画面・社内ツール・プロトタイプなど、速く形にしたいならBootstrap。デフォルトのデザインが実用十分で、JS付き部品もそのまま使えます。
• 独自デザインを作り込みたい／コンポーネント指向のフレームワークと組むならTailwind CSS。デザインシステムを自分で定義でき、バンドルも軽くなります。

どちらも成熟したツールであり、優劣の問題ではありません。「デフォルトの恩恵を受けたいか、デザインを自分で定義したいか」というプロジェクトの性質で選ぶのが、一番納得感のある判断軸になります。

注意点

• バージョンによってクラス名や設定ファイルの書式が変わることがあるため、採用時は使用バージョンの公式ドキュメントを確認してください。特にTailwindはv3→v4で設定の持ち方（JS設定ファイル → CSSファースト設定）が大きく変わっています。
• 本記事のコード例は思想の違いを示すための最小例であり、アクセシビリティ属性（aria-* など）は省略しています。実運用では必ず補ってください。