Tailwind CSS を整える。

＝同じボタンを Tailwind と Bootstrap の両方で書いて見比べる

Tailwind CSS が初めての方は、先にそもそも Tailwind CSS とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

HTML EDITOR @tailwindcss/browser 4.3.3

Ctrl/⌘ + Enter で実行

PREVIEW

サンプルを選んで「▶ 実行」を押すと、ここにプレビューが表示されます。

CONSOLE

console 出力やエラーがあればここに表示されます。

そもそも Tailwind CSS とは

CSS ファイルを書かずに、HTML に短い名前を並べて見た目を決める道具。

Tailwind CSS は、ユーティリティファーストと呼ばれる考え方の CSS フレームワークです。p-4（余白）や text-lg（文字の大きさ）のような、1つの役割だけを持つ短いクラス名が用意されていて、HTML のタグに並べて書くだけで見た目が決まります。

Tailwind Labs が開発・公開しているオープンソースです。Bootstrap のように「ボタン」「カード」といった完成した部品を最初から持つのではなく、細かい部品を組み合わせて自分のデザインを作るのが特徴です。

どこで・どんな場面で使うか

会社のサイト・ランディングページを作るとき

デザインに合わせて細かく調整でき、ほかのサイトと同じ見た目になりにくいのが利点です。
React・Vue・Astro などのアプリ

部品ごとに HTML の中でスタイルが完結するので、部品を動かしたり消したりしても CSS が残りません。
管理画面や社内ツール

表・フォーム・ボタンを短時間で整えられ、見た目をそろえやすくなります。
デザインを試作するとき

HTML を書き換えるだけでその場で見た目が変わるので、試行錯誤が速くなります。
求人やチーム開発の現場

広く使われているため、新しく入った人も読み方を知っていれば、すぐにコードの意味がわかります。

なぜ覚えておくと得か

CSS ファイルを行き来しなくてよい。HTML を見るだけで見た目がわかり、修正も同じ場所で終わります。
名前を考える手間が減る。クラス名の付け方に悩まず、デザインの調整に集中できます。
学んだことが現場で通じやすい。対応するフレームワークが多く、チーム開発でも見かける機会が増えています。

上の練習場でクラス名を書き換え、見た目がどう変わるかを実際に試してみてください。

Tailwind CSS が向いている場面／向かない場面

自分に合うのはどれ？選び方を見る →

色・余白・配置などをユーティリティクラスの組み合わせで組み立てるCSS。

◎ 向いている場面

・独自のデザイン・レイアウトを自分で細かく組み立てたいとき
・ class名を都度考えず、ユーティリティの組み合わせで素早くスタイリングしたいとき
・コンポーネント指向のJSフレームワーク（React/Vue等）と組み合わせるとき

△ 向かない場面

・既製のUI部品（モーダル・ドロップダウン等）を、CSS設計を考えずすぐ使いたいとき
・クラス名の羅列を増やしたくないとき

ユーティリティファーストとコンポーネント指向

どちらも「HTML に class を書くだけで見た目が付く」点は同じですが、class の設計思想がまったく違います。

観点	Tailwind CSS	Bootstrap
class の単位	1つ1つが小さなユーティリティ（`px-4` `bg-blue-600` 等）	意味の決まった部品（`btn` `card` 等）
見た目の決め方	HTML 側でクラスを積み重ねて自由に組む	用意されたデザインに乗る（独自色は上書きが必要）
CSS 生成の仕組み	使われている class 名を走査し、必要な分だけ実行時に生成	あらかじめ全部入りの CSS ファイル1本を読み込む
JS が要る場面	基本的に不要（見た目は CSS だけ）	モーダル・ドロップダウン等は bootstrap.bundle.min.js が必須
向いている場面	独自デザインを細かく作り込みたいとき	とにかく早く「それっぽい」画面を組みたいとき

上の①「比較用ボタン」を Tailwind タブ・Bootstrap タブそれぞれで開いてみてください。見た目はほぼ同じでも、書かれている class がまったく違うことが分かります。

このページについて

ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。

Tailwind タブは @tailwindcss/browser 4.3.3 を読み込み、書いた class から実行時に CSS を生成します。 Bootstrap タブは bootstrap 5.3.8 の CSS を取得して埋め込み、モーダル等の開閉には bootstrap.bundle.min.js も読み込みます。どちらも「実行」を押したときに、切り替えたタブのライブラリだけを取得します（プログラムを受け取るだけの通信で、あなたが書いたコードは送られません）。

無限ループを書くとプレビューのタブが固まることがあります。その場合は「■ 停止」を押してください（プレビュー用の iframe を作り直します）。