nextjs - 💡(How to fix) Fix Tailwind CSS v3 not compatible with Next.js 15 + Turbopack? (Module not found: Can't resolve 'fs') [1 comments, 2 participants]

When using Tailwind CSS v3 with Next.js 15 and Turbopack, the build fails immediately with the following error:

TL;DR

• The issue can likely be resolved by upgrading to Tailwind CSS v4, as the same setup works fine with this version.

Guidance

• Verify that the error Module not found: Can't resolve 'fs' is indeed caused by the compatibility issue between Tailwind CSS v3 and Turbopack in Next.js 15.
• Check the documentation of Tailwind CSS and Next.js for any known compatibility limitations or issues with Turbopack.
• Try upgrading to Tailwind CSS v4 to see if the issue is resolved, as indicated by the fact that the same setup works fine with this version.
• If upgrading is not feasible, investigate alternative solutions, such as using a different CSS framework or configuring PostCSS to work around the compatibility issue.

Example

• No code snippet is provided as the issue is more related to compatibility and configuration rather than a specific code problem.

Notes

• The issue seems to be specific to the combination of Tailwind CSS v3, Next.js 15, and Turbopack, and may not affect other versions or configurations.
• The fact that upgrading to Tailwind CSS v4 resolves the issue suggests that this is a compatibility problem that has been addressed in the later version.

Recommendation

• Apply workaround: Upgrade to Tailwind CSS v4, as this version is known to work with the same setup and resolves the compatibility issue.