第3部 環境構築

第2部までで、Tailwind CSS が「なぜ」「どう」動くのかを理解しました。ここからは、実際に手を動かすための環境構築です。

環境構築は、Tailwind でつまずく人が最も多い場所でもあります。理由は単純で、Tailwind は「どのビルドツールの上で動かすか」によって導入手順が変わるからです。Vite で動かすのか、Rails のアセットパイプラインで動かすのか——土台が違えば、入れ方も変わります。

そこでこの第3部では、まず導入経路の全体像と共通の作法を押さえ（第7章）、次に主要なフレームワークごとの具体的な手順を見ます（第8章、Rails を最重点で扱います）。最後に、補完や整形といったエディタ環境を整え、開発を快適にします（第9章）。

とにかく今すぐ動かしたい人へ: 理屈は後回しでまず「画面に青い文字を出す」体験をしたいなら、先に 付録F ハンズオン: ゼロから動く最小例へ進んでください。ビルド不要の経路（Play CDN）なら 1 分で動きます。一度動かしてから本章に戻ると、各手順の意味がぐっと分かりやすくなります。

本書は Tailwind CSS v4 を前提としています。 v4 では読み込みが @import "tailwindcss"; の 1 行になり、tailwind.config.js は必須ではなくなりました。古い記事に出てくる @tailwind base; @tailwind components; @tailwind utilities; という 3 行の書き方は v3 までのものです。本書では使いません。