[turbopack]: importing tailwind/tailwind.css fails with serverComponentsExternalPackages error

[stefanprobst]

Link to the code that reproduces this issue

https://github.com/stefanprobst/issue-turbopack-tailwind

To Reproduce

1. clone repo
2. pnpm install
3. pnpm run dev (next dev --turbo)
4. open http://localhost:3000 and see error message (see below)

Current vs. Expected behavior

current:

importing tailwind/tailwind.css fails with the following error message when running next dev --turbo:

 ⨯ ./node_modules/.pnpm/tailwindcss@3.4.3/node_modules/tailwindcss/tailwind.css
Package tailwindcss (serverComponentsExternalPackages or default list) can't be external
The request tailwindcss/tailwind.css matches serverComponentsExternalPackages (or the default list), but it can't be external:
Only .mjs, .cjs, .js, .json, or .node can be handled by Node.js.

expected:

importing tailwind/tailwind.css should work, like it does with webpack (running pnpm next dev without --turbo works fine).

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #18~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Wed Feb  7 11:40:03 UTC 2
  Available memory (MB): 32032
  Available CPU cores: 4
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.5
Relevant Packages:
  next: 14.3.0-canary.14 // Latest available version is detected (14.3.0-canary.14).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

_PACK-3013

[ForsakenHarmony]

You probably don't want to import tailwind/tailwind.css as that will completely ignore your tailwind config.

Currently, the best way is to use it through PostCSS: https://tailwindcss.com/docs/installation/using-postcss

[stefanprobst]

as that will completely ignore your tailwind config

i don't think that's true - this has been working perfectly fine for me. you still have to set up the postcss plugin, but it avoids having a separate css file in the project with just the three @tailwind directives.

EDIT: this is the file content: https://unpkg.com/browse/tailwindcss@3.4.3/tailwind.css

[ForsakenHarmony]

Ah, you're right, seems we need to add an exception for CSS files as externals.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.