📌 Next.js初心者がTailwind CSS v4でハマった話｜教材のバージョンに注意！
こんにちは！
今回は、Next.jsの環境構築でハマった話を書いておこうと思います。
俺はNextどころかReactすら触ったことがありませんでした。
最近、「スキルを増やそう！」と思い、少し時間ができたので勉強してみようと重い腰を上げたのですが……。
環境構築で、ガッツリつまづきました。
🚀 Tailwind CSSの設定ファイル（tailwind.config.js）がなくて、リアルに3日無駄にした話
Udemyの教材でNext.js + Tailwind CSSに挑戦！
Udemyで面白そうな教材を見つけました。
その内容は、Next.jsとTailwind CSSを使ってホームページを作るというもの。
Web業界にいる俺には役立ちそうな教材だったので、さっそく購入して進めることに。
しかし……。
🛑 環境構築中に「tailwind.config.js」が見当たらない
動画（教材）の手順通りに環境構築を進めていると、
あるはずの「tailwind.config.js」がないことに気づく。
「まぁ、そのうち作られるだろう」と思いながら進めていくと、
途中で 「tailwind.config.jsに設定を追加してください」 という指示が登場。
え？そもそもファイルがないんだけど？？？
最初は「何か設定をミスったのか？」と思い、
✅ 環境を作り直し（何回も）
✅ インストール方法を変えてみる
✅ YouTubeやブログを調べる
しかし、どうやっても**「tailwind.config.js」だけが作られない。**
教材の通りに進めないと完成しないので、かなり焦りました……。
📌 原因は「Tailwind CSS v4」の仕様変更だった
3日間いろいろ試した結果、ついに原因が判明！
✅ 2025年3月現在、Tailwind CSSはv4が最新
✅ Tailwind CSS v4では「tailwind.config.js」が不要になった
つまり、
正しく最新のNext.js環境構築をしても、「tailwind.config.js」は自動で作成されない！（かもしれない）
俺のPC環境が原因かもしれないけど、**Tailwind CSS v4では「config.jsが必須ではない」**と知り、とりあえず一安心。
📌 俺の失敗ポイント
今回、俺が3日間無駄にした原因は以下の通り。
❌ 購入した教材が古かった（Tailwind CSSのバージョンが古い）
❌ Next.js / React の知識がなかった（環境構築の違いに気づけなかった）
❌ Tailwind CSSの仕様変更を知らなかった（アップデート情報を事前にチェックすべきだった）
❌ 3日間も同じ問題にこだわりすぎた（もっと柔軟に考えるべきだった）
📌 結論：Next.jsの勉強が目的なら、Tailwind CSSにこだわる必要なかった
ひとまず、教材通りに進めるのは難しそうですが、
Tailwind CSSの最新バージョン（v4）に合わせて調べながら進めることにしました。
そして、このブログを書いていて気づいたのが……
「Next.jsの勉強が目的なら、Tailwind CSSなんて最悪なくてもよかった！」
Tailwind CSSは見た目の部分だし、最悪普通のCSSを書けば問題なし。
3日間何やってたんだろうなぁ……。
まぁ、これも勉強ということで、引き続きNext.jsを学んでいこうと思います！
コメント