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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

11reactions
adamwathancommented, Dec 1, 2020

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.

11reactions
jiaming10commented, Dec 1, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issues installing Tailwindcss, specifically with "npx tailwindcss ...
Im following the documentation but im stuck right at the npx tailwindcss init https://tailwindcss.com/docs/installation.
Read more >
Installation - Tailwind CSS
npx tailwindcss init. This will create a minimal tailwind.config.js file at the root of your project: // tailwind.config.js module.exports = { purge: [] ......
Read more >
How to set up Tailwind CSS 2.0?
Run the following command to create the tailwind config file. npx tailwindcss init. This command creates a file in the root directory named...
Read more >
tailwindcss | Yarn - Package Manager
A utility-first CSS framework for rapidly building custom user interfaces. ... .com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg"> Tailwind CSS ...
Read more >
How to use Tailwind CSS in React to configure Create React ...
We demonstrate how to get Tailwind CSS working inside a CRA-based React project without having to eject Create React App.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found