第2部 Tailwind CSS の仕組み

第1部では「なぜ Tailwind CSS が必要とされたのか」を理解しました。この第2部では、視点を内側に向けます。Tailwind CSS は、内部でいったい何をしているのかを解き明かします。

Tailwind を使い始めると、不思議に感じることがいくつもあります。「grid-cols-15 なんてクラス、どこにも定義していないのに、なぜ効くのか」「あれだけ大量のクラスがあるのに、なぜ本番の CSS は小さいのか」「@theme に書いた値が、どうしてクラスにもなり CSS 変数にもなるのか」。

これらは魔法ではありません。すべてビルドの仕組みで説明できます。仕組みを理解すると、トラブル（クラスが効かない、など）に強くなり、第4部以降のユーティリティの学習も「暗記」ではなく「理解」になります。

• 第4章では、Tailwind がコードを読み取って CSS を生成する全体の流れを見ます。
• 第5章では、色や余白などのテーマ（デザイントークン）がどう定義され、どうクラスと CSS 変数になるのかを見ます。
• 第6章では、hover: や md: などのバリアントが、どうやってセレクタに変換されるのかを見ます。