Tailwindが何なのかは前の回でつかめました。クラス名の勉強に入る前に、まず手元で動く状態を作ります。 自分で打って確かめられる環境があるかどうかで、このあとの回の身につき方がまるで変わります。手順は2通りあります。
- Play CDN——スクリプト1行。ビルド無しで今すぐ試せる（ただし公開用ではない）
- CLIでビルド——公開するサイト向け。npmコースでやった
--watchがそのまま出てきます
まず試して感触をつかみ、続けると決めたらビルドに移る——この順がいちばんつまずきません。
npmビルドを1回通してみる（Sass→CSS）「ビルド」がまだピンとこない人は、npmコースで1回通しておくとこの回が楽になります方法1：Play CDNで今すぐ試す
HTMLファイル1つだけで始められます。<head>にスクリプトを1行足すだけです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-orange-500">しまちゃんのページ</h1>
</body>
</html>このファイルをブラウザで開けば、もうクラスが効いています。インストールもコマンドも要りません。
方法2：CLIでビルドする
こちらが本番の手順です。npmコースでやったことと形は同じで、変換する道具がSassからTailwindに変わるだけです。
①プロジェクトを用意する
mkdir tailwind-practice
cd tailwind-practice
npm init -y②Tailwindを入れる
npm install --save-exact tailwindcss @tailwindcss/clitailwindcssが本体、@tailwindcss/cliがコマンドとして呼び出すための道具です。2つセットで入れます。--save-exactはバージョンを固定するオプションでした。
^の便利さの裏にあるリスク③もとになるCSSを1行だけ書く
mkdir src@import "tailwindcss";この1行だけです。 これが「Tailwindのユーティリティをここに展開してください」という宣言になります。
④ビルドしてみる
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch読み方はこうです。
-i（input）——もとになるファイル-o（output）——書き出す先--watch——保存を見張って、変わったら自動で作り直す
--watchを付けているので、コマンドは終わらずに待機状態になります。止めるときはCtrl + Cです。
⑤HTMLから書き出したCSSを読む
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/output.css" />
</head>
<body class="p-8 bg-orange-50">
<h1 class="text-3xl font-bold text-orange-500">しまちゃんのページ</h1>
</body>
</html>読むのはoutput.cssのほうです（input.cssではありません）。ここを間違えると、1行しか書いていないCSSを読みこむことになり、何も効きません。
⑥毎回打たなくていいようにする
長いコマンドはpackage.jsonのscriptsに登録します。
{
"scripts": {
"dev": "@tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch",
"build": "@tailwindcss/cli -i ./src/input.css -o ./src/output.css --minify"
}
}これでnpm run devが制作中、npm run buildが公開用（--minifyでファイルを小さくする）になります。
なぜCSSが巨大にならないのか
「何千クラスも用意されているなら、CSSも巨大になるのでは？」——ここが一番よくできている部分です。
ビルドのとき、Tailwindはプロジェクトのファイルを走査して、実際に書かれているクラス名だけを集めます。使っていないクラスは1つも出力されません。だから、
- 用意されているクラスの数と、書き出されるCSSの大きさは関係ない
- ページが増えても、使うクラスは重複するので、CSSはあまり増えない
これが「Tailwindはサイトが育ってもCSSが太らない」と言われる理由です。素のCSSだと、ページを足すたびにCSSも積み上がっていきます。
色や余白を自分好みに変える
サイトのブランドカラーをbg-brandのように使いたい——そんなときは、CSSの中に@themeブロックを書きます。
@import "tailwindcss";
@theme {
--color-brand: #ff8a3d;
--color-brand-dark: #e06a1f;
}これでbg-brand・text-brand・border-brand-darkなどが自動で使えるようになります。変数の名前の付け方に規則があり、--color-◯◯と書けば◯◯という色名として登録される仕組みです。
Play CDNで試すときは、<style type="text/tailwindcss">の中に同じことを書けます。
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-brand: #ff8a3d;
}
</style>つまずきやすいところ
| 症状 | 原因と対処 |
|---|---|
| クラスが何も効かない | HTMLがinput.cssを読んでいる。読むのはoutput.css |
| 一部のクラスだけ効かない | クラス名を文字列で組み立てていないか。丸ごと書く |
| 保存しても反映されない | --watchが動いているか確認（別のターミナルで待機させる） |
@tailwindでエラーになる | 古い版の書き方。@import "tailwindcss";に直す |
| ビルドは通るのに色が違う | @themeの変数名の綴りを確認（--color-から始める） |
VSCodeが@import "tailwindcss"に警告を出す | Tailwindの拡張機能（Tailwind CSS IntelliSense）を入れると消えます |
このレッスンのまとめ
- 試すだけならPlay CDNのスクリプト1行。ただし公開用には使わない
- 本番はCLIでビルド。
npm install tailwindcss @tailwindcss/cliから始まる - もとになるCSSは
@import "tailwindcss";の1行だけ - HTMLが読むのは
output.css——ここを間違えると何も効かない - クラス名を文字列で組み立てると走査で見つからず、消される
- 色や刻みの追加は
@themeブロック（設定はJSからCSSへ移った） @tailwind base;やtailwind.config.jsが主役の記事は古い版のサイン
動く環境ができました。次の回からは、ここに実際に打ちこみながら進めます。まずは呪文に見えるクラス名の規則を読み解きます。