Tailwind in React project - getting "Cannot find module 'autoprefixer'" error during setup

Question

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.

Adkison

Did you try npm install autoprefixer? – Bathulda

@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. – Adkison

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 – Orling

Answer 1

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

Bathulda

This solution did not work for me in CI, as I am using ui.shadcn.com with tailwindcss – Unworthy

Answer 2

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.

Reggiereggis

Answer 3

This worked for me

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

Overstep

Answer 4

The issue is sometimes you install tailwind instead of tailwindcss

pnpm add tailwindcss

-- not --

pnpm add tailwind

Delphiadelphic

Answer 5

This is simple way for Creating The Tailwind Configuration File

npm install tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

Spicer

Answer 6

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.

Counterpart

Answer 7

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".

Shanks

Answer 8

In my case while copying project I missed postcss.config.js file which was having below content

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

I added it in root directory of the project and its working fine, putting here in case someone is using postcss.

Hoxie

Answer 9

I am using ui.shadcn.com with tailwindcss in CI too, my problem was that autoprefixer, postcss and tailwindcss in the package.json file were in devDependencies not in dependencies.

As my CI was in production mode, I had the same error as you, just change them to dependencies and a quick npm i fixed everything for me.

Overdo