概要
Tailwind CSS（テイルウィンド シーエスエス）は、
ユーティリティクラスを組み合わせてデザインを作る「ユーティリティファーストCSSフレームワーク」です。
あらかじめ用意されたクラスをHTMLに直接書き込むことで、
CSSを自分で記述せずに効率的にデザインを整えることができます。
近年、Web開発で急速に普及しているフロントエンド開発の定番ツールのひとつです。
正式名称
Tailwind CSS（テイルウィンド シーエスエス）
略称
Tailwind（テイルウィンド）
特徴
- ユーティリティファースト：小さなCSSクラスを組み合わせてデザインを作成
- 直感的な命名規則：
text-center、bg-blue-500など意味がわかりやすい - カスタマイズ性が高い：設定ファイルでテーマカラーやフォントを簡単に変更可能
- レスポンシブ対応が容易：
sm:,md:,lg:などの接頭辞で画面幅に応じたスタイルを切り替えられる - CSSの肥大化防止：不要なCSSを削除する仕組み（パージ機能）があり、軽量なスタイルを維持可能
- 開発スピード向上：CSSを書かずに済むため、コーディングが早い
具体例
HTMLに直接クラスを記述するだけでデザインが反映されます。
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
ボタン
</button>このコードでは、以下のスタイルが自動で適用されます：
- 背景色：青 (
bg-blue-500) - 文字色：白 (
text-white) - 太字 (
font-bold) - パディング：上下 0.5rem、左右 1rem (
py-2 px-4) - 角丸ボーダー (
rounded)
関連用語
| 用語 | 解説 |
|---|---|
| CSSフレームワーク | Bootstrap、Bulma など |
| ユーティリティクラス | 小さい単位でスタイルを付与するクラス |
| レスポンシブデザイン | 画面サイズに応じたレイアウト変更 |
| PostCSS | Tailwind CSSの内部処理に使われるツール |
| PurgeCSS | 未使用CSSを削除する仕組み |