はじめに

FBC Press: Tailwind CSS ― 仕組みと思想から理解する

本書は、プログラミングスクール FjordBootCamp（フィヨルドブートキャンプ） の教材として作成された、Tailwind CSS の教科書です。

本書は、Tailwind CSS のクラス一覧ではありません。

目的は、Tailwind CSS を「便利な短縮記法」として覚えることではなく、なぜ Tailwind CSS のような道具が生まれ、どんな問題を解決し、どこに限界があるのかを理解することです。

Tailwind CSS は、CSS を不要にする道具ではありません。CSS が大規模な開発で抱えてきた、グローバルな影響範囲、詳細度、命名、重複、チーム内のばらつきといった問題に対する、ひとつの設計上の答えです。その答えが妥当かどうかは、プロジェクトやチームによって変わります。本書では、利点だけでなく批判や向かない場面も扱います。

想定読者

本書は、次のような読者を想定しています。

• HTML/CSS の基礎を学んだことがある
• Flexbox と Grid の基本的な考え方を知っている
• Rails チュートリアル程度の開発経験がある
• React の基礎にも触れたことがある、またはこれから触れる予定がある

Tailwind CSS を初めて使う人でも読めるように書いていますが、完全な HTML/CSS 入門ではありません。CSS の基礎が曖昧な場合は、分からない用語を調べながら読み進めてください。

読み方

最初から順に読むなら、第1部から始めてください。第1部では、まだ Tailwind CSS のクラスをほとんど書きません。まず「なぜこの道具が必要になったのか」を理解します。

すぐに手を動かしたい場合は、付録Fから始めても構いません。Play CDN / Rails / Vite の 3 経路で、最小の動く例を作れます。そのあとで第3部に戻ると、導入手順の意味が理解しやすくなります。

すでに Tailwind CSS を使っている人は、第2部で仕組みを確認し、第6部と第7部で設計・運用の判断材料を拾う読み方もできます。

バージョン基準

本書は Tailwind CSS v4 系を前提にしています。2026-06 時点の公式ドキュメントを基準にしています。

ビルド速度、既定値、ディレクティブ、導入手順は将来のバージョンで変わる可能性があります。各章末の参考資料では、できるだけ公式ドキュメントや公式ブログなどの一次情報を示しています。実務で使うときは、必ず最新の公式情報も確認してください。

それでは、まず 第1部 で、Tailwind CSS が生まれる前の CSS の歴史と課題から見ていきます。