はじめに #
Tailwind CSSは、そのユーティリティファーストなアプローチで現代のWeb開発に欠かせないツールとなっています。2024年にリリースされたv4は、パフォーマンスの向上や設定の簡素化など、多くの魅力的な新機能を提供しています。
しかし、メジャーバージョンアップにはしばしば予期せぬトラブルが伴います。筆者もv3からv4へアップグレードした際に、すべてのスタイルが全く適用されなくなるという問題に直面しました。この記事では、その原因と具体的な解決策を共有します。
問題の現象：アップグレード後にスタイルが消える #
npm install tailwindcss@latestのようなコマンドでパッケージを更新し、開発サーバーを再起動したところ、Tailwind CSSで適用していたはずのスタイルがすべて消え、プレーンなHTMLのような表示になってしまいました。コンソールにも特にエラーは表示されず、一見すると何が原因か分かりにくい状況でした。
原因：v4における設定とインポート方法の変更 #
この問題の根本的な原因は、Tailwind CSS v4におけるアーキテクチャの変更にあります。
- v3まで:
tailwind.config.jsというJavaScriptファイルで設定を定義していました。 - v4から: 設定は
tailwind.config.ts（または.js）ではなく、CSSファイル内で直接行うのが基本となりました。@importや@configといった新しいディレクティブを使い、よりCSSネイティブな方法で設定を読み込みます。
この変更により、v3までのプロジェクトでglobal.cssなどに記述していた@tailwindディレクティブの読み込み方法がv4では正しく機能しなくなり、結果としてスタイルが一切生成されなくなっていたのです。
解決策：global.cssのインポートを修正する
#
解決策は、global.css（またはプロジェクトのエントリーポイントとなるCSSファイル）の記述をv4の作法に合わせることです。
修正前の global.css (v3)
@tailwind base;
@tailwind components;
@tailwind utilities;
修正後の global.css (v4)
@import "tailwindcss";
/* オプション：v3互換の設定ファイルを読み込む場合 */
@config "./tailwind.config.js";
@layer base {
/* ここにベーススタイルを追加できます */
}
@layer components {
/* ここにコンポーネントスタイルを追加できます */
}
@layer utilities {
/* ここにユーティリティスタイルを追加できます */
}
ポイント #
@import "tailwindcss";: これがv4の最も重要な変更点です。この一行で、Tailwindのコア機能がインポートされます。@config "./tailwind.config.js";: もし既存のtailwind.config.jsの設定を引き続き利用したい場合は、@configディレクティブでそのパスを指定します。v4は互換性のためにこの仕組みを提供しています。@layerディレクティブ:base,components,utilitiesといったレイヤーに独自のスタイルを追加する場合は、@layerブロックを使用します。
この修正を行った後、開発サーバーを再起動すれば、正しくスタイルが適用されるはずです。
まとめ #
Tailwind CSS v4へのアップグレードは、単なるパッケージのバージョンアップだけでなく、設定ファイルの扱い方やCSSのインポート方法といった根本的な部分に変更が加えられています。もしアップグレード後にスタイルが効かなくなった場合は、まずグローバルなCSSファイルの内容を見直し、v4の新しい記法に更新してみてください。
公式ドキュメントのアップグレードガイドも併せて確認することをお勧めします。