@import on CSS file not working when i use Turbopack

[allysontsoares]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/elegant-hodgkin-jrwltm?workspaceId=90948d01-dfc4-44b7-a979-f689d697bccf

To Reproduce

I'm trying to import radix colors on my css file in a new Next 15 Project, but is not working (when i disable turbopack works fine):

When there's just the colors: The error on compile is: "./src/app/globals.css:42:2 Module not found: Can't resolve '@radix-ui/colors/violet-dark-alpha'"

When i have Tailwind at the top:

The error changes to:

Current vs. Expected behavior

Without turbopack works fine:

Provide environment information

Operating System:
  Platform: Ubuntu 24.04
Binaries:
  Node: 20.14.0
  bun: 1.1.34 (using only the package manager)
Relevant Packages:
  "next": "15.0.3",
  "react": "19.0.0-rc-66855b96-20241106",
  "react-dom": "19.0.0-rc-66855b96-20241106"

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[lightyfr]

can you try @use?

[timneutkens]

Did some digging, the first import is replaced by Tailwind which means it creates invalid CSS as CSS needs @import to be at the top of the file but tailwind is replacing the @import for tailwind with the actual code.

You can work around that by creating a separate file for Tailwind specifically, I've done that in this sandbox: https://codesandbox.io/p/devbox/clever-snow-r99pv8

So you @import './tailwind.css'.

Seems there's something related to node_modules without .css being resolved by webpack but not by Turbopack. Digging further into that. Right now you could add .css to all these imports like @import "@radix-ui/colors/mauve-dark.css"; (added .css at the end) and then it will work. Will discuss this with the team 🙏