Bootstrap派だったけどTailwind CSSに寝返った話

CSSフレームワークはBootstrap派でした。

v3のころから使い始めて、アップデートすることなくずっとv3を使い続けてきました。

1年くらい前からTailwind CSSを使い始め、その便利さに感動して以来、すっかりTailwind派に寝返りました。

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

公式サイトによると「Tailwind CSS – HTMLから離れることなく、モダンなウェブサイトを素早く構築できます。」だそうです。

インストール手順

Claude Code(Opus 4.5)で Tailwind CSSを導入したいというだけでnpm経由でインストールしてくれます。魔法です。

❯ cd ~/path/to/project
❯ claude

╭─── Claude Code v2.1.15 ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                      │ Tips for getting started                                                                                                     │
│            Welcome back!             │ Run /init to create a CLAUDE.md file with instructions for Claude                                                            │
│                                      │                                                                                                                              │
│                                      │ ─────────────────────────────────────────────────────────────────                                                            │
│               ▐▛███▜▌                │ Recent activity                                                                                                              │
│              ▝▜█████▛▘               │ No recent activity                                                                                                           │
│                ▘▘ ▝▝                 │                                                                                                                              │
│   Sonnet 4.5 · API Usage Billing     │                                                                                                                              │
│   ~/path/to/project                  │                                                                                                                              │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

  /model to try Opus 4.5. Note: you may need to request access from your cloud provider

───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
❯ Tailwind CSSを導入したい
───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────

⏺ Tailwind CSSを導入しますね。まず、プロジェクトの構造を確認してから進めます。

...作業が続く

⏺ Tailwind CSSの導入が完了しました。セットアップの概要をまとめます。

  Tailwind CSS v4 導入完了

ざっくりとした使い方

Tailwindは

padding 用のクラス
margin 用のクラス
font-size 用のクラス

のように、よく使うスタイルをクラス名で指定して、デザインします。

以前だとこんな感じ。

<div class="box"></div>

.box {
    margin: 2rem;
}

名前だけではどんなスタイルなのか謎です。

でもTailwindはこれだけです。

<div class="m-md"><div>

これが「HTMLから離れることなく、モダンなウェブサイトを素早く構築できる」ということでしょうか。

Tailwindの強力な命名規則によって、独自のCSSをほとんど書かなくていいのです。

たとえば、

flexboxを使う
子要素を縦に並べる
子要素は垂直中央に寄せる
子要素間に余白を置く（でも画面が大きい場合は余白をもっととりたい）
テキストは中央
余白は大きめに（でも画面が大きい場合は余白をもっととりたい）
相対位置にする

こんなのをTailwindで描くとこうなります。

<div class="flex flex-col justify-center gap-3xs md:gap-sm text-center mt-lg md:mt-xl relative"></div>

スクラッチで書くとどうなるでしょう。

.target{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  gap: 0.25rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .target {
    gap: 0.75rem;
    margin-top: 3rem;
  }
}

命名規則がすべて

よく使うスタイルは以下のようにだいたい組み合わせで用意されています。

m- = margin
p- = padding
mt- = margin-top
mb- = margin-bottom
mx- = margin-left/right
py- = padding-top/bottom
w- = width
h- = height
text- = 文字サイズ/色
bg- = 背景色

数値によるサイズ指定

Tailwindはある要素に対して自由に16pxとかは書かず、まずはあらかじめ決められたスケールを選びます。（もちろん任意指定もできるけど、まずはスケールを使うのが基本です）

p-4とかmt-2の数字は、Tailwindのspacing scaleです。

たとえば1rem=16pxとするならこんな感じ。

1 → 0.25rem（4px）
2 → 0.5rem（8px）
4 → 1rem（16px）
6 → 1.5rem（24px）
8 → 2rem（32px）

上に16px余白を空けたいなら .mt-4です。

指定したい場合は w-[1024px]とします。[]も便利ですね。

文字サイズ指定

Tailwindは文字サイズも段階値です。

text-xs → 0.75rem (12px)
text-sm → 0.875rem (14px)
text-base → 1rem (16px)
text-lg → 1.125rem (18px)
text-xl → 1.25rem (20px)
text-2xl → 1.5rem (24px)

個人的にはbaseはmdのほうがいいと思いますが、Tailwindではbaseです。

状態が変化した際のスタイル

ほかにも便利なものはたくさんありますが、状態が変化した時にもスタイルを買えられます。

# ホバー時にテキストを赤くしたい
<div class="text-white hover:text-red"></div>

# フォーカス時にテキストを赤くしたい
<div class="text-white focus:text-red"></div>

# タブレット以上は余白を大きくしたい
<div class="m-md md:m-lg"></div>

# ダークモード時はテキストを白くしたい
<div class="text-black dark:text"></div>

Tailwind CSSの何が便利なのか

1. 命名しなくていい

Bootstrapを使っていると、class名を付ける場面はそこまで多くないですが、それでも「Bootstrapの上に独自CSSを足す」状況になると急に始まるのがこれです。

.button-area
.btn-wrapper
.user-card
.profile-box
.header-right

これ画面作っているときも誰かのclass名を見ているときも地味に消耗します。

どこまで汎用か
似たようなやつめっちゃある
久しぶりに見るとだいたい意味がわからない

Tailwindの場合はそもそも「命名」という概念がかなり減ります。

2. デザイン調整が爆速

Tailwindの便利さは、実装中の微調整が必要になった瞬間に出ます。

例えばBootstrap + 独自CSSだと

classを足す
CSSファイルを開く
調整する
影響範囲を疑う
戻って確認する

みたいなことが起きがちです。

Tailwindだとその場で
<div class="p-4">を<div class="p-6">にすれば済みます。

たったこれだけですが、この微調整を省略できるのは強い。

3. CSSの肥大化を避ける

長く運用しているプロジェクトほど、CSSは増えていきます。

使われてないクラスが残る
似たようなスタイルが乱立する
上書きのために詳細度が高くなる
何がどこに効いてるのか分からなくなる

これ、あるあるです。

Tailwindは基本的に “必要なものを必要な場所にだけ書く” ので、「CSSが肥大化して把握不能」という状態になりにくいです。

4. “デザインの統一”が自然にできる

Tailwindはユーティリティが揃っているだけじゃなく、プロジェクトのデザインルールを作りやすいのも強いです。

例えば

余白は4刻み
角丸はmdまで
キャンセルボタンはこの色

みたいな制約があると、実装は楽になります。

Tailwindはその制約を

設計（tailwind.config.js）
運用（class指定）

で自然に守れる仕組みになっています。

しかも「統一したいのに、人によってCSSの書き方が違う」みたいな問題も起きにくい。

チーム開発で嬉しいやつです。

5. コンポーネント指向（React / Next.js）と相性がいい

これは個人的にかなり大きいポイントです。

React / Next.jsのようなコンポーネント指向の開発では、
見た目もロジックも1つの部品として閉じたい場面が多いです。

Tailwindだと

コンポーネントファイルの中で
見た目も完結する

ので、部品として扱いやすいです。

CSS Modulesでも近いことはできますが、Tailwindはさらに「いまここだけ直したい」みたいな状況に強いです。

6. AIエージェント開発と相性がいい

Claude CodeなどのAIエージェント開発領域でTailwindが強い理由はシンプルで、AIエージェントの画面開発は試行錯誤だからです。

UIの変更が多い＝Tailwindが強い

AIエージェント開発は、作っている途中でこういう変更が頻繁に起きます。

入力欄の位置を変える
ボタンを増やす
カードにするか表にするか試す
トーストやモーダルを足す
モバイル対応する

この「ちょっと変えたい」「やっぱり戻したい」が日常茶飯事なので、Tailwindの微調整が早いというメリットがそのまま効きます。

Tailwindの弱点

classが長くなりがち。DOM構造が汚くなる。これに尽きると思います。

<button class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500">

慣れるまではぎょっとします。

ただ、これは次の工夫でだいぶ軽減できます。

よく使う形はコンポーネント化する
@apply を必要なところだけ使う

つまり「ベタ書き＝悪」ではなく、段階的に整える感じです。

Tailwindが向いているプロジェクト

個人的にTailwindが向いている条件はこのへんです。

画面数が多い（管理画面・業務アプリ系）
デザイン調整が頻繁に入る
コンポーネントの再利用が多い
中長期で保守する予定がある

逆に、LPだけ作って終わりみたいなケースだとBootstrapのような最初から完成形があるほうが速い場合もあります。

インタラクティブで複雑なUIだとこれも不向きかもしれません。

開発チームが品質を保てるCSSフレームワーク

Tailwindの便利さは、派手な機能よりも

余白どうしよう
クラス名どうしよう
CSSどこに書こう
影響範囲こわい

みたいな、日々の迷いをルールベースで消してくれるところです。

Bootstrapは完成形がそのまま利用できるメリットもありますが、もしBootstrapは使ったことがあるけれど、Tailwind CSSはまだ使ったことがないという方は使ってみてください。

ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。

選考ではありません
履歴書不要
技術の話が中心
所要時間30分程度
オンラインOK

エンジニアと話してみる

インストール手順

ざっくりとした使い方

命名規則がすべて

数値によるサイズ指定

文字サイズ指定

状態が変化した際のスタイル

Tailwind CSSの何が便利なのか

1. 命名しなくていい

2. デザイン調整が爆速

3. CSSの肥大化を避ける

4. “デザインの統一”が自然にできる

5. コンポーネント指向（React / Next.js）と相性がいい

6. AIエージェント開発と相性がいい

Tailwindの弱点

Tailwindが向いているプロジェクト

開発チームが品質を保てるCSSフレームワーク

ChatGPT API実践入門！環境準備や始め方、できることを紹介

Claude Code を VS Code に導入してみた

Claude Codeで始めるAIエージェント時代のバイブコーディング

[プロジェクト進行しくじり談] 修正の嵐から私が学んだ2つのこと

Bootstrap派だったけどTailwind CSSに寝返った話

インストール手順

ざっくりとした使い方

命名規則がすべて

数値によるサイズ指定

文字サイズ指定

状態が変化した際のスタイル

Tailwind CSSの何が便利なのか

1. 命名しなくていい

2. デザイン調整が爆速

3. CSSの肥大化を避ける

4. “デザインの統一”が自然にできる

5. コンポーネント指向（React / Next.js）と相性がいい

6. AIエージェント開発と相性がいい

Tailwindの弱点

Tailwindが向いているプロジェクト

開発チームが品質を保てるCSSフレームワーク

関連記事

ChatGPT API実践入門！環境準備や始め方、できることを紹介

Claude Code を VS Code に導入してみた

Claude Codeで始めるAIエージェント時代のバイブコーディング

[プロジェクト進行しくじり談] 修正の嵐から私が学んだ2つのこと