Tailwind CSSは、HTMLにクラスを並べるだけで見た目が決まる仕組みです。初めて見ると「クラス名が呪文みたいに長い」と感じますが、正体はとてもシンプルで、小さなCSSルールにあらかじめ名前を付けておいただけです。
このコースは、素のCSSを学んだ人が「同じことを別の書き方でやる」という視点で進みます。CSSの知識はそのまま使えるので、新しい言語を覚えるつもりでいなくて大丈夫です。
コースCSSCSSがまだの人は、先にCSSコースへ。このコースはCSSを知っている前提で進みますまず同じものを2通りで書いてみる
白いカードを1つ作ります。まず素のCSSで。
<div class="card">
<p class="card__title">しまちゃん</p>
<p>シマエナガのひな。HTMLとCSSを勉強中。</p>
</div>.card {
padding: 16px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card__title {
font-size: 18px;
font-weight: bold;
}同じものをTailwindで書くと、こうなります。
<div class="p-4 bg-white rounded-xl shadow-md">
<p class="text-lg font-bold">しまちゃん</p>
<p>シマエナガのひな。HTMLとCSSを勉強中。</p>
</div>CSSファイルは1行も書いていません。 クラス名が、そのままCSSの指定になっています。
| Tailwindのクラス | 素のCSSでいうと |
|---|---|
p-4 | padding: 1rem; |
bg-white | background-color: #fff; |
rounded-xl | border-radius: 0.75rem; |
shadow-md | box-shadow: …; |
text-lg | font-size: 1.125rem; |
font-bold | font-weight: 700; |
1クラス＝ほぼ1つのCSS宣言。 これが「ユーティリティクラス」と呼ばれるものの正体です。
正体は「ただのCSS」
魔法ではないことを確かめるために、Tailwindを使わずに、上で出てきたクラスだけを手で定義してみます。
.p-4 { padding: 1rem; }
.bg-white { background-color: #fff; }
.rounded-xl { border-radius: 0.75rem; }
.shadow-md { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.text-lg { font-size: 1.125rem; }
.font-bold { font-weight: 700; }たった6行です。そしてこのCSSがあれば、さきほどのTailwindのHTMLはそのまま動きます。下のデモが、実際にそれを動かしたものです。
Tailwindがやっているのは、この作業をあらかじめ何千クラス分も用意しておくこと。それだけです。「新しい技術」ではなく「大量の別名表」だと思ってください。
何が変わるのか
書き方が変わると、作業の感触が変わります。3つあります。
1. クラス名を考えなくなる
素のCSSでは、まず名前を決めなければ何も書けません。「このカードのタイトルは.card__titleか.card-titleか」で毎回止まります。Tailwindでは名前を決める工程そのものが消えます。
2. HTMLを見れば見た目が分かる
素のCSSだと「.cardって何が指定されてるんだろう」とCSSファイルを開きに行く必要があります。TailwindはHTMLに全部書いてあるので、行き来がなくなります。
3. 消すのがこわくなくなる
素のCSSでいちばん怖いのは、使われていないCSSを消せないことです。「この.card、どこかで使われてないか？」が分からないので、消さずに残す判断になり、CSSが太っていきます。
Tailwindはクラスがその要素にしか効かないので、HTMLを消せばそのスタイルも消えます。この「消せる」という性質が、長く運用するサイトでいちばん効く利点です。
引き換えに失うもの
いいことばかりではありません。先に正直に書いておきます。
- HTMLが長くなる——クラスが10個並ぶのは日常です。読みにくいという批判は的を射ています
- 同じ並びをくり返す——ボタンを5個置くなら、同じクラスの列を5回書くことになります（対処法は後の回で扱います）
- CSSを知らないと使えない——
p-4が余白だと分かるのはCSSを知っているからです。近道にはなりません - ビルドが必要——使ったクラスだけを集めてCSSを書き出す仕組みが要ります
このコースの進み方
素のCSSと1対1で見比べながら進みます。
- まず動かす——手元で試せる状態を作る（ここを先にやります）
- クラス名の読み方——
p-4の4は何か、色の500は何か（規則が分かれば覚える量が激減します） - レイアウト——FlexboxとGridをユーティリティで書く
- 画面幅と状態——
md:やhover:という接頭辞の仕組み - 使い分け——向いている場面・向いていない場面
途中で「これは素のCSSで書いたほうが早いな」と思う場面が必ず出てきます。それも含めて判断できるようになるのが、このコースのゴールです。
このレッスンのまとめ
- Tailwindは小さなCSSルールにあらかじめ名前を付けたもの——1クラス＝ほぼ1宣言
- 中身はただのCSS。手で6行定義すれば同じ見た目が再現できる
- うれしいのは「速く書ける」より「消せる」——CSSが太らない
- 引き換えにHTMLが長くなる。これはトレードオフで、好みの話ではない
- CSSを知らないと使えない——近道ではなく、別の書き方
次は、手元で動く状態を先に作ります。読むだけで進むより、自分で打って確かめられるほうが圧倒的に速く身につくからです。