Tailwind CSS v4とCSS Modulesの違いは？書き方・制約・選び方

ひよこ

どちらもCSSを書く仕組みなの？

ペンギン先生

そうだけれど、解決する問題が違うよ。Tailwindは小さなユーティリティクラスを組み合わせる設計。CSS Modulesは、クラス名やアニメーション名を既定でローカルな範囲にする仕組みだね。見た目のルールは自分で書くんだ。

ひよこ

Tailwindだとどう書くの？

ペンギン先生

HTMLやコンポーネントにflexやtext-centerなどのクラスを書いて組み立てるよ。共通の色や余白をテーマにまとめられる。すべてのCSSが不要になるわけではなく、独自のスタイルや設計ルールは必要に応じて用意するんだ。

ひよこ

CSS Modulesのクラス名はどうなる？

ペンギン先生

ビルド環境がローカル名を別の名前へ変換し、JavaScriptから参照する対応表を返すよ。よく.module.cssというファイルを使う。ただし命名形式や読み込み方法はツール次第。Reactそのものの機能ではなく、フレームワークやビルド環境の対応を確認するんだ。

ひよこ

ローカルならほかのCSSの影響は受けない？

ペンギン先生

クラス名の衝突は避けやすいけれど、Shadow DOMのようにすべて隔離するものではないよ。継承、要素セレクタ、グローバルなスタイル、カスケードは関係する。名前の衝突がないことと、見た目への影響がないことは別だね。

ひよこ

v4では設定が不要なの？

ペンギン先生

基本はCSS-firstで、CSS内の@themeなどで設定できる。ただしビルドとの連携や独自テーマの設定まで不要になるわけではないよ。v3の設定やプラグインをそのまま使えるかは移行ガイドで確認しよう。

ひよこ

動的にクラス名を組み立てても動く？

ペンギン先生

Tailwindはソースを文字列として調べるので、bg-に色名をつないだだけでは、必要な完全なクラス名を検出できないことがある。条件ごとにbg-blue-600などの完全な文字列を用意すると分かりやすいよ。

ひよこ

どちらが高速で軽い？

ペンギン先生

生成CSSの量、配信の分割、HTMLの量、キャッシュなどで変わるよ。ビルドが速いこととブラウザ表示が速いことも別。Tailwindなら必ず小さい、CSS Modulesなら自動で最適分割される、とは言えないんだ。

ひよこ

両方使うのはあり？

ペンギン先生

併用はできるけれど、Tailwind公式は避けられるなら併用しないことを勧めている。既存CSS Modulesへ段階導入するなど、理由を決めよう。@applyなどでテーマを参照するなら@referenceやビルドの扱いも確認してね。

どちらを選ぶかの比較表

Tailwind v4.0の公式基準はSafari 16.4以降、Chrome 111以降、Firefox 128以降です。古いブラウザの対応が必要なら、この基準と採用バージョンの説明を確認します。

「開発中は見えたのに本番でスタイルが消える」とき

Tailwindでは、必要なクラスが完全な文字列でソースに存在するか、対象ファイルが検出範囲に入るかを確認します。CSS Modulesでは、対応表を介してクラスを指定しているか、CSSを正しく読み込んでいるかを確認します。両方で、最後はブラウザの適用済みスタイルとカスケードを調べてください。

Sassとの比較はこちらのコラムで、プリプロセッサとユーティリティ設計の違いから説明しています。

参考資料

確認日：2026年9月27日。製品の仕様・料金・対応環境は導入時にも確認してください。

• Tailwind: Upgrade guide：v4の設定移行・ブラウザ条件。
• Tailwind: Detecting classes：完全なクラス文字列の検出。
• CSS Modules: README：クラス・アニメーション名のローカル化と対応表。
• Tailwind: Compatibility：CSS Modulesとの併用、@reference、Sassとの違い。