Tailwind CSS とは？

普通のCSSは「.button { color: red; padding: 10px; }」みたいに自分でクラスを作ってスタイルを書くよね。Tailwind CSSは最初から「text-red-500」「p-2」みたいなクラスが大量に用意されていて、HTMLにクラス名を並べるだけでデザインできるんだよ。

正直、最初は「class="flex items-center justify-between p-4 bg-white rounded-lg shadow-md"」みたいに長くなってびっくりすると思う。でも慣れると「CSSファイルをあちこち行き来する手間がない」のが快適に感じるようになるんだ。

いい質問だね。Tailwindはビルド時にHTMLの中で実際に使われているクラスだけを残して、使っていないものは全部消してくれるんだ。だから最終的なCSSファイルはとても小さくなるよ。

Bootstrapは「ボタン」「カード」みたいに完成品のパーツが用意されてて、すぐに見た目が整うのが強み。Tailwindは自由にカスタマイズしやすい代わりに、全部自分で組み立てる必要がある。プロトタイプを素早く作りたいならBootstrap、独自デザインを追求するならTailwindが向いてるよ。

「関心の分離」というWeb開発の原則（HTMLは構造、CSSは見た目を担当する）に反しているという批判はずっとあるんだ。特に大規模プロジェクトでデザインを一括変更したいとき、HTMLの中にスタイル情報が散らばっていると修正箇所を探すのが大変になる。Tailwindの@applyディレクティブやコンポーネント化で解決できる部分もあるけど、どこまでユーティリティクラスを使ってどこからコンポーネントに切り出すかの判断基準は、ベテランでもプロジェクトごとに迷うポイントなんだよ。