Tailwind CSS を整える。

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

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

HTML EDITOR @tailwindcss/browser 4.3.3

Ctrl/⌘ + Enter で実行

PREVIEW

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

CONSOLE

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

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 を作り直します）。