問題
Next.jsのプロジェクトで、Tailwind CSSの公式ドキュメントに従って設定を行ったものの、CSSが適用されませんでした。
参考: Install Tailwind CSS with Next.js
この問題は、Turbopackを利用しているプロジェクトであることが原因でした。
(Turbopackとは、Next.jsの開発元であるVercelが開発した次世代のJavaScriptバンドラーで、従来のWebpackより高速な開発体験を提供する)
解決方法
Tailwind CSSの公式ドキュメントではなく、Next.jsの公式ドキュメントを参照することで解決できました。
How to install Tailwind CSS in your Next.js application
上記の設定により、Tailwind CSSが正常に適用されることが確認できました。
終わりに
今回の経験から以下のことを学びました。
- Tailwind CSSの公式ドキュメントとNext.jsの公式ドキュメントで設定方法が異なる場合がある
- Turbopackのような特定の環境を使用している場合は、より具体的な技術スタック（今回はNext.js）の公式ドキュメントを参照する必要がある