TailwindCSSが反映されない！と思ったら初手でつまづいていた話。（TailwindCSS-v3）

はじめに

Next.js、TailwindCSSを勉強中、Next.jsプロジェクトを作成していざ始めようと思ったら、TailwindCSSが反映されない。という事になったので、原因と対応についてまとめたいと思います。

構成

TypeScript
Next.js（AppRooter） + TailwindCSS-v3
VSコード

反映されない原因

globals.cssの設定内容がlayout.tsx(js)でimportできていなかった。
不要なコードやファイルを削除する際に消してしまったのかな？？

対応

layout.tsx(js)にimport "./globals.css";を打ち込む。

src/app/layout.tsx

import "./globals.css";

src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

解説

Next.jsでTailwindCSSを使用する場合、globals.cssにTailwindCSSの内容を書くのだが、layout.tsxが全体のレイアウト定義やメタ情報の定義を行う特殊ファイルとなっているため、このファイルにimportしないと未定義となりTailwindCSSが使用できない事態となってしまう。

編集履歴

2025年4月18日

• TailwindCSSのバージョンを表記しました。
  修正箇所：TailwindCSS ➡ TailwindCSS V3