【ているうぃんどしーえすえす】

Tailwind CSS とは？

最終更新: 2026年10月8日

💡 余白・色・配置を、小さなクラスで組み合わせる

余白、色、配置などを表す小さなユーティリティクラスをHTMLなどのマークアップで組み合わせるCSSフレームワーク。ソースから検出したクラスに応じて必要なCSSを生成する。

📌 このページのポイント

二つの書き方の概念的な比較。p-4の余白は既定の設定で1remに相当し、テーマの設定で変わる。class属性はstyle属性とは異なる。

ひよこ

Tailwind CSSって普通のCSSと何が違うの？

ペンギン先生

CSSを使うこと自体は同じだよ。自分で.cardなどのクラスを定義する代わりに、p-4で内側の余白、bg-whiteで白い背景、という小さなクラスをマークアップで組み合わせるんだ。

ひよこ

HTMLにstyleを書くのと同じ？

ペンギン先生

似た感覚で書けるけれど、クラスに対応するCSSが使われるよ。hover:でマウスを重ねた状態、md:で一定以上の画面幅に応じた指定なども表せる。色や余白の共通ルールも使えるんだ。

ひよこ

使わないクラスが大量に入るの？

ペンギン先生

公式の現行ドキュメントでは、ソースにあるクラス名を検出し、必要なCSSを生成する仕組みだよ。全クラスを入れてから全部削る、という説明ではない。最終的な量は使う指定や構成によるんだ。

ひよこ

プログラムでクラス名をつなげて作ってもいい？

ペンギン先生

検出時はソースを文字列として読むので、色名だけを後からつなげると必要なクラスを見つけられないことがあるよ。例えばtext-red-500のような完全な名前をソースに置き、条件に応じて選ぶ方法を使うんだ。

ひよこ

クラスが長くなったり、同じ指定が増えたりしたら？

ペンギン先生

繰り返す部品をコンポーネントへまとめる方法があるよ。テーマや独自CSSの追加もできるので、CSSを一切書かなくて済むという意味ではない。どこを共通化するか、チームで決めて使うと整理しやすいんだ。

まとめ：ざっくりこれだけ覚えればOK！

「Tailwind CSS」って出てきたら「小さなCSSクラスを組み合わせて見た目を作るフレームワーク」と思えばだいたいOK！

📖 おまけ：英語の意味

「tailwind / CSS」＝追い風 / Cascading Style Sheets

💬 tailwindは英語で「追い風」。CSSはCascading Style Sheetsの略で、Webの見た目を記述するための言語だよ。

参考資料