今日学んだこと#
Tailwind CSSはユーティリティファーストのCSSフレームワークです。従来のCSSとは異なり、小さなユーティリティクラスをHTMLに直接記述することで、スタイルの定義と適用箇所を同じ場所に置く（コロケーション）アプローチを取ります。
学習内容#
Tailwind CSSとは#
Tailwind CSSは、bg-blue-500 や text-white などの小さなユーティリティクラスを組み合わせてスタイリングを行うCSSフレームワークです。
従来のCSSとの違い#
従来のCSSでは、HTMLとCSSを別ファイルに分離して管理していました。
/* 従来のCSS */
.primary-button {
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
<button class="primary-button">ボタン</button>
しかし、実際の開発ではHTMLとCSSを常にセットで変更することが多く、ファイル間の追跡が困難という課題がありました。
Tailwind CSSでは、ユーティリティクラスをHTMLに直接記述します。
<!-- Tailwind CSS -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">ボタン</button>
スタイルの定義と適用箇所が同じ場所にあるため、直感的に理解しやすくなります。
ユーティリティファーストとは#
Tailwind CSSの根底にある考え方が「ユーティリティファースト」です。
ユーティリティクラスとは「1つのCSSプロパティだけを持つ小さなクラス」のことです。このユーティリティクラスを最優先に使用することで、CSSの肥大化を防ぐことができます。
共通スタイルの一括管理が必要な場合は、コンポーネント化や@applyディレクティブで対応可能です。
まとめ#
- Tailwind CSSはユーティリティファーストのCSSフレームワーク
- 小さなユーティリティクラスをHTMLに直接記述する
- スタイルの定義と適用箇所が同じ場所にある（コロケーション）ため、直感的に理解しやすい
- 共通スタイルはコンポーネント化や
@applyで管理可能
自分の言葉でまとめる#
Tailwind CSS とは、ユーティリティファーストのCSSフレームワークである。 従来のCSSでは、HTMLとCSSを別ファイルに分離して管理していた。 しかし、実際の開発ではHTMLとCSSを常にセットで変更することが多く、 ファイル間の追跡が困難という課題があった。
Tailwind CSSではbg-blue-500 や text-white などの
小さなユーティリティクラスをHTMLに直接記述する。これにより、
スタイルの定義と適用箇所が同じ場所にある（コロケーション）ため、直感的に理解しやすい。
また、共通スタイルの一括管理はコンポーネント化や@applyで対応可能である。 Tailwind CSSにおいては「ユーティリティファースト」という考えが根底にある。 「1つのCSSプロパティだけを持つ小さなクラス」であるユーティリティクラスを 最優先に使用することで、CSSの肥大化などを防ぐことが可能。
/* 従来のCSS */
.primary-button {
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
<!-- Tailwind CSS（HTMLに直接記述） -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">