Tailwind CSSについて、従来CSSとの書き方の違い、導入手順、導入したほうがいい場合・しなくていい場合、などについてまとめました。
Tailwind CSSとは？
Tailwind CSSとは、2017年に登場したCSSフレームワークです。
- CSSフレームワークとは、WEBサイトの見た目を決めるデザインを共通化した骨組み・部品集のこと
- あらかじめ用意された、1つの役割だけを持つ小さなクラスを、HTMLに直接並べて書く「ユーティリティファースト」の考え方
従来のCSSとTailwind CSSの書き方の違い
従来のHTMLとCSSの場合
<p class="lead">こんにちは</p>
.lead {
color: #2d6a4f;
font-size: 20px;
text-align: center;
}
Tailwind CSSの場合
すでにあるTailwind CSSを利用するので、新しいCSSを追加する必要がなく、HTMLだけで完結します。
<p class="text-green-700 text-xl text-center">こんにちは</p>
Tailwind CSSのクラスの例
Tailwind CSSは、役割ごとにクラス名が決まっています。
| 目的 | クラスの例 | 意味 |
|---|---|---|
| 内側の余白 | p-4 | padding（内側の余白）を付ける |
| 外側の余白 | m-2 | margin（外側の余白）を付ける |
| 文字色 | text-white | 文字を白にする |
| 背景色 | bg-blue-500 | 背景を青にする |
| 横並び | flex | 子要素を横に並べる |
| 中央ぞろえ | text-center | テキストを中央にそろえる |
| 角丸 | rounded | 角を丸くする |
クラス名は、Tailwind CSS公式ドキュメントで検索できます。
レスポンシブや状態も指定できる
Tailwindは、画面幅やマウス操作に応じた指定も、クラスの接頭辞（プレフィックス）で指定できます。
md:flex… 画面が中サイズ以上のときだけ横並びにするhover:bg-blue-700… マウスを乗せたときだけ背景色を変える
Tailwind CSSの使い方・導入手順
Tailwind CSSを使い始める方法は2つあります。
1. 試してみたいとき（CDNの読み込み）
HTMLファイルの<head>に、公式が用意する読み込みタグを1行入れます。使っていないCSSも丸ごと読み込まれるので、Tailwindを試したい場合や学習などに向いています。
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-center">Hello Tailwind</h1>
</body>
2. 本格的に使いたい時（ビルドツールで導入）
サイトやアプリを本格的に作るときは、npm（エヌピーエム、部品を管理するツール）などでインストールして使います。
- プロジェクトにTailwind CSSをインストールする
- 設定ファイルと、読み込み用のCSSを用意する
- ビルドすると、使ったクラスの分だけCSSが作られる
使っていないクラスは最終的なCSSに含まれないため、不要な記述がなくファイルが軽くなります。
Tailwind CSSを導入すべきか？
導入したほうがいい場合
- あらかじめ用意されている共通の基準や洗練されたCSSを使いたい
- 配布されているTailwind CSSベースの外部パーツ・ライブラリ（Reactなどの外部コンポーネント）を活用したい
- すでにTailwind CSSのクラス名に慣れている
導入しなくて（使わなくて）いい場合
- 独自のデザイン、アニメーション・擬似要素（
::beforeなど）を多用している - HTMLのコードをスッキリ保ちたい（
class=""に大量のクラス名が並ぶ構造を避けたい） - 従来のCSSに慣れている
ビッグテックはTailwind CSSを使っている？
ReactやAngularを開発しているMeta・Googleなどの主要テクノロジー企業も、自社のメインプロダクトではTailwind CSSを使っていません。
- 数千人規模の開発体制のため、独自のデザインシステム（デザイントークン・CSS変数など）をすでに構築している
- 大規模なサービスでは、大量のクラス名や巨大なCSSファイルの解析がパフォーマンスに影響しやすい
- 自由にクラスを組み合わせられる分、デザインシステムにない余白や色を個別に使われやすく、ブランドの統一が崩れやすい
各社は、Tailwind CSSの代わりに独自の仕組みでスタイルを管理しています。
| 企業 | 主な仕組み |
|---|---|
| Meta | 独自のCSS-in-JSツール「StyleX」（ビルド時にCSSへ変換） |
| Material Designのデザイントークンを各プラットフォームへ展開 | |
| Apple | Human Interface Guidelinesの思想に基づく独自CSS |
このサイトでは従来のCSSを採用
このサイト（まなびのすけ）では、Tailwind CSSは使わず従来のCSSの書き方を採用しています。
- 要素には、パーツを指定クラス名を付ける（例：ナビゲーション、記事本文、目次）
- クラスの中身は、共通のCSSファイル（
design.cssなど）にまとめて書く - 色や余白などの基準値は、CSS変数で一元管理する
個人的に従来のCSSに慣れているのと、現在はサイト全体のレイアウトやデザインを頻繁に更新している最中なので、従来のCSSの方が開発の効率が良いです。
よくある質問（FAQ）
Q. CSSとTailwind CSSの違いは何ですか？
デザイン（スタイル）の書き方が異なります。従来のCSSは「HTMLでクラス名を付け、別ファイルのCSSでデザインを指定する」のに対し、Tailwind CSSは「あらかじめ用意された小さなクラスをHTMLに直接並べて指定する」方法です。別ファイルでCSSを書く必要がなく、HTMLだけでデザインが完結するのが特徴です。
Q. Tailwind CSSは初心者でも使えますか？
使えますが、基本的なCSSの知識があるとスムーズです。Tailwind CSSのクラス名はp-4（padding）やflex（display: flex）のように従来のCSSをベースに作られているため、CSSの基本（色、余白、レイアウト構造など）を理解しているとスムーズです。
Q. Tailwind CSSを使うとHTMLのコードが長くなって見づらくないですか？
1つの要素に複数のクラスを指定するためHTMLが散らかって見えやすいですが、慣れるとHTMLを見るだけでどんなデザインか直感的に把握できるようになります。
Q. 従来のCSSとTailwind CSS、結局どちらを使えばいいですか？
制作するサイトの規模や、開発スピード・既存のデザインに合わせて選択します。外部のパーツ（ライブラリ）を活用して爆速で開発したい場合やデザインルールを揃えたい場合は「Tailwind CSS」が向いています。一方で、装飾やアニメーションが複雑なサイト、従来のCSSの書き方に慣れていてHTMLの見た目をスッキリ保ちたい場合は「従来のCSS」が適しています。