【失敗談】Next.jsとTailwind CSSの環境構築で3日間ムダにした原因と解決策

IT関連

📌 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を学んでいこうと思います!

コメント

タイトルとURLをコピーしました