Next.js errors Global CSS cannot be imported from within node_modules when importing tailwindcss/resolveConfig

[sachinraja]

What version of Tailwind CSS are you using?

v2.20.0

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 11.0.0

What version of Node.js are you using?

16.3.0

What browser are you using?

Chrome

What operating system are you using?

Ubuntu

Reproduction repository

https://github.com/sachinraja/tw-config-import-error-repro

Describe your issue

I get this error when Next.js attempts to compile a page importing tailwindcss/resolveConfig.

(node:155489) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API

error - ./node_modules/modern-normalize/modern-normalize.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/tailwindcss/lib/plugins/preflight.js
Could not find files for / in .next/build-manifest.json

[Dupflo]

Same issue since today so I downgrade to my previous version "tailwindcss": "2.1.4",

[sachinraja]

I've tracked down the error to this line in src/util/resolveConfig.js. It imports all the corePlugins from src/plugins.index.js. This includes the preflight plugin which imports the modern-normalize css. In v2.1.4, only the list of plugins was being imported into src/util/resolveConfig.js. This list was removed in v2.2.0. I'd be willing to submit a PR, but I'm unsure how to proceed. Is it possible to create this file in a build step?

[sachinraja]

I've attempted to use babel-plugin-preval to solve this, but it's not able to transpile, so it doesn't work with ES Modules.

[arturocr]

Exact same issue on my end. But on macOS Big Sur 11.4 and with node 14.17.1.

[Dupflo]

Exact same issue on my end. But on macOS Big Sur 11.4 and with node 14.17.1.

Same for me the only solution I found as I wrote before was to downgrade version to 2.1.4

[kedarguy]

I got a bit different error when upgrading to next 11 and tailwind 2.2.2, downgrading back to 2.1.4 fixed it for me as well, maybe they are related

./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[2]!./styles/globals.css
TypeError: Cannot destructure property `theme` of 'undefined' or 'null'.

[sachinraja]

@kedarguy That seems like a different problem, you may want to file another issue.

[ETARAZ]

spend lot of time for it but the solution is stupid 😂 :
Framework: "next": "11.1.2"
webpack: "v 5"
My issue:
error - ./node_modules/modern-normalize/modern-normalize.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules\tailwindcss\lib\plugins\preflight.js
Solution:
Instead of doing :
import 'tailwindcss'
Do
import 'tailwindcss/tailwind.css'

It's work like magic 🎩