21

I'm following the documentation for setting up Tailwind in a React project over on https://tailwindcss.com/docs/guides/create-react-app. I've been following the steps, but when I get to the part where I'm supposed to run npx tailwindcss init in order to generate a tailwind.config.js file, I get the following error:

Cannot find module 'autoprefixer'
Require stack:
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli.js

I've checked that I have autoprefixer in my node_modules folder and tried reinstalling it, but I get the same error. In my package.json, I have the following:

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...

as per the documentation. My craco.config.js file is as follows:

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

again, as per the documentation. I've also tried reinstalling the @craco/craco package to no avail, so at this point I'm stuck. Any help would be appreciated.

Sinan Yaman
  • 5,714
  • 2
  • 15
  • 35
LiteralMetaphore
  • 601
  • 1
  • 7
  • 17
  • Did you try npm install autoprefixer? – Sinan Yaman Dec 07 '20 at 09:46
  • @SinanYaman Yes, I've mentioned this in the question. I checked that it's in `node_modules` and tried running `npm i autoprefixer` again but I come back to the same error. – LiteralMetaphore Dec 07 '20 at 09:49
  • recently I got the same error but not in setup, it was a production error, I mistakenly imported a function from `autoprefixer` which I installed as a development module so it could not find what I imported when rendering the page – Rawand Sep 06 '22 at 23:06

7 Answers7

80

Can you try this:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

here: https://github.com/tailwindlabs/tailwindcss/issues/2831

Sinan Yaman
  • 5,714
  • 2
  • 15
  • 35
3

I have faced same problem.

at first I faced “Cannot find module 'autoprefixer'” error during setup.

than I tried "yarn" instead of "npm".

rest of process will be remain same.

it works now.

FHM Fokhruddin
  • 33
  • 3
1

This worked for me

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Deepak Mukka
  • 358
  • 2
  • 6
0

The issue is sometimes you install tailwind instead of tailwindcss

pnpm add tailwindcss

-- not --

pnpm add tailwind

phacic
  • 1,402
  • 1
  • 14
  • 21
0

This is simple way for Creating The Tailwind Configuration File

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
Rohit JP Singh
  • 1
  • 1
  • 2
0

Just use:-

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

instead of,

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

This worked for me.

Abhishek Yadav
  • 51
  • 2
0

I updated npm and nodejs and error is gone. Maybe it is a compatibility error.

npm update -g npm

{yourpackagemanager} upgrade nodejs -y

npm updated from "6.11.3" to "6.14.17".

nodejs updated from "v12.10.0" to "v18.9.1".

vardars
  • 541
  • 1
  • 8
  • 20