Tailwind CSS v2.0 compat build - 'npx tailwindcss init -p' not working

Describe the problem:

Creating a new issue after going thru #2831

As I understand the requirements, tailwinds 2.0 requires Node >= 12 as per https://github.com/tailwindlabs/tailwindcss/issues/2831#issuecomment-731616851

I am using the latest LTS of node v14.15.1 which should be good. However when running

npx tailwindcss init -p

I am getting the following error

“Cannot find module ‘autoprefixer’”

Link to a minimal reproduction:

~/Documents/Projects% node -v
v14.15.1
~/Documents/Projects%
~/Documents/Projects% mkdir compat-test && cd compat-test
~/Documents/Projects/compat-test%
~/Documents/Projects/compat-test% npm init -y
Wrote to /Users/michael/Documents/Projects/compat-test/package.json:

{
  "name": "compat-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


~/Documents/Projects/compat-test% npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN compat-test@1.0.0 No description
npm WARN compat-test@1.0.0 No repository field.

+ postcss@7.0.35
+ @tailwindcss/postcss7-compat@2.0.1 (as tailwindcss)
+ autoprefixer@9.8.6
added 90 packages from 91 contributors in 4.204s

10 packages are looking for funding
  run `npm fund` for details

~/Documents/Projects/compat-test% npx tailwindcss init -p
npx: installed 84 in 4.698s
Cannot find module 'autoprefixer'
Require stack:
- /Users/michael/.npm/_npx/46296/lib/node_modules/tailwindcss/lib/cli/commands/build.js
- /Users/michael/.npm/_npx/46296/lib/node_modules/tailwindcss/lib/cli/commands/index.js
- /Users/michael/.npm/_npx/46296/lib/node_modules/tailwindcss/lib/cli/main.js
- /Users/michael/.npm/_npx/46296/lib/node_modules/tailwindcss/lib/cli.js

However if I use the current Node v15.3.0, everything works as expected

~/Documents/Projects% node -v
v15.3.0
~/Documents/Projects% mkdir compat-test && cd compat-test
~/Documents/Projects/compat-test% npm init -y
Wrote to /Users/michael/Documents/Projects/compat-test/package.json:

{
  "name": "compat-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


~/Documents/Projects/compat-test% npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

added 90 packages, and audited 90 packages in 4s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
~/Documents/Projects/compat-test% npx tailwindcss init -p

   @tailwindcss/postcss7-compat 2.0.1

   ✅ Created Tailwind config file: tailwind.config.js
   ✅ Created PostCSS config file: postcss.config.js

[adamwathan]

I wonder if this is really an issue of npm v6 vs npm v7 — does Node 15 use npm 7 by default? It sounds like npx isn’t noticing that tailwindcss is installed and aliased within package.json.

I’m running npm 7 so haven’t run into this myself 😕

This solution will always work though:

npx tailwindcss-cli@latest init -p

This whole compatibility build stuff is a nightmare, sorry about this folks.

[jiaming10]

This issue is very weird because I can confirm it is working at 23 November, because I created a new project on that date. However when I tried to create another project today, then it started to fail.

I’m also using the Node LTS, and I don’t think updating NodeJS version as per https://github.com/tailwindlabs/tailwindcss/issues/2831#issuecomment-731616851 is the solution.

Edit: After searching around the issues, there is a workaround here: https://github.com/tailwindlabs/tailwindcss/issues/2814#issuecomment-734893338 npx tailwindcss-cli@latest init -p should do the trick.