nextjs - 💡(How to fix) Fix [Turbopack] Can't resolve 'tailwindcss' bare CSS @import when project parent directory has no package.json [1 comments, 2 participants]

Error:

TL;DR

Modify the globals.css file to use a relative path for the Tailwind import or configure Turbopack to resolve modules relative to the project root.

Guidance

• Verify that the package.json file exists in the project root and contains the necessary dependencies, including tailwindcss and @tailwindcss/postcss.
• Check the Turbopack configuration to see if there are any options available to specify the resolution path for modules.
• Consider using a relative path for the Tailwind import in globals.css, such as @import "./node_modules/tailwindcss/base.css";, to avoid relying on the resolver.
• If possible, try moving the project to a directory whose parent contains a package.json file to see if the issue is specific to the current directory structure.

Example

No code example is provided as the issue is related to configuration and resolution paths rather than code syntax.

Notes

The issue seems to be specific to the combination of Next.js 16.1.1, Turbopack, and Tailwind v4, and may be related to how Turbopack resolves modules. Further investigation into Turbopack's configuration options may be necessary to find a solution.

Recommendation

Apply a workaround, such as using a relative path for the Tailwind import, as the root cause of the issue is likely related to Turbopack's resolution path and may require a fix from the Turbopack team.