Tailwind CSSの使い方を解説｜導入からクラスの書き方・v4の変更点まで

Tailwind CSSを触ってみたものの、HTMLがクラス名だらけになって面食らった。あるいは、ネットの解説どおりに設定ファイルを作ろうとしたら、そもそもそのファイルが生成されなかった。この2つでつまずく方が急増しています。

後者の原因ははっきりしています。Tailwind CSSはv4系で設定の仕組みが大きく変わり、標準ではtailwind.config.jsを生成しない形になったためです。古い記事の手順をそのままなぞると、途中で行き止まりに当たります。

この記事では、Tailwind CSSの考え方から導入手順、よく使うクラスの体系、そしてv4での変更点までを整理して解説します。読み終える頃には、自分のプロジェクトに入れるかどうかを判断できる状態になっているはずです。

Tailwindは「CSSを書かずに済む道具」じゃない。「CSSを知っている人が、CSSファイルを開かずに書ける道具」だよ。この違いは大きい。

Tailwind CSSはどういう仕組みなのか

ユーティリティクラスを組み合わせる

Tailwind CSSは、1つの役割だけを持つ小さなクラスを大量に用意しているフレームワークです。それらをHTMLの中で組み合わせて、目的の見た目を作ります。

たとえばボタンを作る場合、Bootstrapなら「btn btn-primary」の2語で完成しますが、Tailwindでは余白・背景色・文字色・角丸をそれぞれ指定していきます。書く量は増えますが、そのぶんデザインを1pxの単位まで自分で決められるのが特徴です。

使っていないクラスは削除される

Tailwindはビルド時にソースコードを走査し、実際に書かれているクラスだけを出力します。そのため、本番環境で読み込まれるCSSは非常に小さくなります。表示速度が検索評価に影響する現在、この性質は明確な利点です。

こうした仕組みを活かすには、土台となるCSSの知識が欠かせません。HTMLとCSSの基本を解説した本を1冊手元に置いておくと、クラス名の意味を確かめながら進められます。

導入方法

v4での標準的な手順

もっとも推奨されているのは、Viteのプラグインを使う方法です。npmでtailwindcssと@tailwindcss/viteを導入し、vite.config.jsにプラグインとして登録します。そのうえで、CSSファイルの先頭に1行のインポート文を書けば準備が完了します。

PostCSSを使う構成や、webpack向けのプラグインも用意されています。正確なパッケージ名と設定の書き方はTailwind CSS公式のインストールガイドを確認してください。バージョンによって手順が変わるため、公式を見るのが最短です。

試すだけならブラウザ版もある

環境構築なしで動作を確かめたい場合、ブラウザ上で動く配布物も用意されています。学習や検証には便利ですが、本番環境での利用は想定されていないため、実案件ではビルドを伴う導入方法を選んでください。

v4で何が変わったのか

設定ファイルがCSSに移った

v3までは、色やフォント、ブレークポイントの設定をtailwind.config.jsというJavaScriptのファイルに書いていました。v4では、CSSファイル内の@themeディレクティブで設定を記述する方式に変わっています。

この変更により、設定がCSS変数として扱えるようになり、JavaScriptの設定ファイルを介さずに済むようになりました。ただし、ネット上の解説記事の大半はまだv3を前提にしているため、混乱の原因になっています。

なお、従来のJavaScript設定ファイルが完全に使えなくなったわけではありません。@configディレクティブで既存のtailwind.config.jsを読み込む互換手段は残されています。ただし一部のオプションは対象外となっているため、新規に書き始めるなら@theme方式に寄せておくほうが後々の手間が減ります。

導入が簡略化された

既存のv3プロジェクトを急いで移行する必要はありません。新規プロジェクトからv4を使い、既存は安定運用を優先するという判断も、実務では一般的です。移行する場合は、公式のアップグレードガイドに従ってください。

「設定ファイルが作られない」で検索している人、たぶん全員これ。バージョンの違いだと気づけば5秒で解決する話なんだ。

クラス名の体系を理解する

数字は間隔の単位を表す

p-4、m-8、gap-2 のような数字は、ピクセル値そのものではなく間隔の刻みを示しています。標準では1単位が0.25rem（多くの環境で4px相当）に対応しており、p-4なら1rem程度の余白になります。

この刻みが用意されていることで、プロジェクト全体の余白が自然と統一されます。自由に数値を書けてしまうと、17pxと18pxが混在するような事態が起きますが、それを構造的に防いでいるわけです。

色は「色名＋濃さ」で指定する

bg-blue-500、text-gray-700 のように、色名と数値の組み合わせで指定します。数値は小さいほど淡く、大きいほど濃くなります。この体系のおかげで、配色の統一が取りやすくなっています。

接頭辞で条件をつける

この接頭辞の仕組みが、Tailwindの生産性を支えています。メディアクエリを別のブロックに書かず、その場で画面幅ごとの指定を並べられるため、コードの見通しが良くなります。

クラスが長くなる問題への対処

Tailwindを使うと、1つの要素に10個以上のクラスが並ぶことがあります。これが受け入れられずに離脱する方もいます。対処法は主に3つです。

実務では1番目が主流です。ボタンやカードをコンポーネントとして切り出せば、長いクラス列を目にするのは定義した1箇所だけになります。TailwindがReactやVueと相性がいいと言われるのは、この理由が大きいです。

2番目の@applyは便利に見えますが、多用するとBootstrapのようなコンポーネント型に近づき、Tailwindの利点が薄れます。使いどころを絞ってください。

Tailwindが向いている場面・向かない場面

とくに1つ目の「向かない」条件は重要です。Tailwindのクラスは、CSSのプロパティと1対1で対応しています。元のCSSを知らなければ、どのクラスを使えばいいのかを検索し続けることになります。基礎が固まっていない段階では、素のCSSで練習するほうが結果的に速く進みます。

CSSの基礎を確認したい方は、MDN Web DocsのFlexbox解説から読み直してみてください。ここが分かっていると、Tailwindの習得速度が明確に変わります。

作業環境を整える

Tailwindでの実装は、クラス名を調べる回数が非常に多い作業です。公式ドキュメントを常時表示しておけるかどうかで、体感の速度がまったく違ってきます。

おすすめは27インチのWQHDモニターを1枚足して、左にエディタ、右にドキュメントとブラウザを並べる構成です。さらに縦回転できるピボット対応のモニターアームがあると、モニターを縦向きにしてドキュメント専用にする使い方もできます。長い設定ファイルやクラス一覧を追う作業では、縦の情報量が効きます。

エディタ側では、クラス名の補完が効く拡張機能を入れておくと入力の手間が大きく減ります。加えて、長時間の入力になるため日本語配列のメカニカルキーボードや低反発のリストレストがあると、手首の負担が変わってきます。

補完が効くようになった瞬間、Tailwindの印象が変わる人は多いよ。「クラス名を覚えないと使えない」って壁が、そこで消えるんだ。

よくある質問

Q. tailwind.config.jsが作られないのですが

v4系では、このファイルを自動生成せず、標準では読み込まない設計に変わったためです。設定はCSSファイル内の@themeディレクティブに書きます。既存のJavaScript設定ファイルを引き続き使いたい場合は、@configディレクティブで読み込む方法が用意されています。参照している記事がv3を前提にしていないか確認してください。

Q. CSSの知識がなくても使えますか

形にはなりますが、思いどおりに調整するのは難しくなります。クラス名がCSSのプロパティと対応しているため、元の知識がないと「何を指定すればいいか」の当たりがつきません。Flexboxとボックスモデルだけでも先に押さえておくことをおすすめします。

Q. BootstrapとTailwindはどちらを学ぶべきですか

目的によります。管理画面や社内システム、既存案件の保守が中心ならBootstrap、新規のWebアプリやデザイン重視の案件ならTailwindです。求人ではTailwindの記載が増えていますが、Bootstrapが不要になったわけではありません。

Q. HTMLが読みづらくなりませんか

素のHTMLで大規模に使うと読みづらくなります。ReactやVueでコンポーネント単位に分割すると、この問題はかなり緩和されます。逆に言えば、コンポーネント化しない環境ではTailwindの利点が出にくいということです。

Q. WordPressで使えますか

使えますが、ビルド環境の用意が必要です。テーマ開発時にTailwindを組み込む構成は実例がありますが、既存テーマに後から入れる場合はクラスの衝突に注意してください。

Q. 独自の色やフォントを追加できますか

できます。v4ではCSS内の@themeディレクティブで定義します。企業のブランドカラーを登録しておけば、bg-brand のような形で使えるようになります。

Q. どのくらいで慣れますか

CSSの基礎がある方で、2〜3週間ほどで主要なクラスに慣れる方が多いようです。すべてを暗記する必要はなく、よく使う30〜40個を覚えて、残りはドキュメントを引く形で十分に実務をこなせます。

まとめ

Tailwind CSSは、小さなユーティリティクラスを組み合わせてデザインを作るフレームワークです。書く量は増えますが、デザインを細かく制御でき、本番のCSSも小さく保てます。

導入で最も注意すべきはv4系で設定の仕組みが変わっている点です。古い記事の手順をなぞらず、公式ドキュメントを見ながら進めてください。

まずは小さなページを1枚、Tailwindだけで組んでみることをおすすめします。ボタン1つ、カード1枚から始めれば、クラス名の体系はすぐに身体に入ってきます。