Tailwind CSSで「mt-10」や「md:」が効かない？@import設定が原因でした
Next.jsを使ったプロジェクトにTailwind CSSを導入した際、一部のユーティリティクラスが機能しないという問題に直面しました。
具体的には、mt-10のようなマージンクラスや、md:text-3xlといったレスポンシブ対応のクラスが全く効かない状態でした。
この記事では、その原因と解決策について共有します。
global.cssにimportしているのに…
AIにTailwind CSSのセットアップ方法を尋ねたところ、global.cssに以下のように記述するよう提案されました。
@import "tailwindcss/preflight";
@import "tailwindcss/utilities";
この設定を適用し実装を進めていったところ、mt-10のような基本的なユーティリティが効いていないことに気付きました。ちゃんとimportしているのになんでだろうと？と思っただけで､一旦､保留に｡
一時的な対応でmt-[80px]のように都度ピクセル指定で対応していました。
さらに、レスポンシブデザインを進めようとした際に、md:text-3xlのようなブレークポイント修飾子も機能しないことが判明し、これはまずいと本格的な調査に乗り出しました。
原因と解決策
しばらく放置してしまっていたこの問題を解決するために、改めてTailwind CSSの公式ドキュメントを確認しました。
Install Tailwind CSS with Next.js
すると、正しい@importの記述は次のように書くべきだということが分かりました。
@import "tailwindcss";
AIが提案した設定では、Tailwind CSSが提供する全てのスタイルの一部であるpreflight（リセットCSS）とutilities（ユーティリティクラス）しか読み込まれていませんでした。baseやcomponentsといった重要なレイヤーが欠けていたため、一部のクラスが正しく機能していなかったのです。
@import を正しく修正したところ、これまで適用されなかったmt-10やmd:プレフィックスが正しく機能するようになりました。
まとめと反省
今回の問題は、公式ドキュメントを確認せずにAIの提案を鵜呑みにしてしまったことが原因でした。結果として、問題解決までに多くの時間を費やし、mt-[80px]のような場当たり的なコードをmt-10に修正する追加作業まで発生してしまいました。
この経験から得られた教訓は以下の2つです。
- 一次情報（公式ドキュメント）を必ず確認する: ライブラリの導入や設定に関しては、何よりもまず公式サイトを参照することが重要です。
- 「おかしいな？」と感じたらすぐに調査する: 問題を放置すると、後々の修正コストが大きくなる可能性があります。
同じような問題で困っている方の助けになれば幸いです。
Discussion