Tailwind in React project – getting “Cannot find module ‘autoprefixer'” error during setup

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\AppDataRoamingnpm-cache_npx16096node_modulestailwindcsslibclicommandsbuild.js
- C:Users\AppDataRoamingnpm-cache_npx16096node_modulestailwindcsslibclicommandsindex.js
- C:Users\AppDataRoamingnpm-cache_npx16096node_modulestailwindcsslibclimain.js
- C:Users\AppDataRoamingnpm-cache_npx16096node_modulestailwindcsslibcli.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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Can you try this:

npm uninstall tailwindcss postcss autoprefixer
npm install <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99edf8f0f5eef0f7fdfaeaead9f5f8edfceaed">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2c332f283f2f2f1c303d28392f28">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="422337362d323027242b3a2730022e2336273136">[email protected]</a>

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="becadfd7d2c9d7d0daddcdcdfed0ced3">[email protected]</a>:@tailwindcss/postcss7-compat <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03736c707760707043">[email protected]</a>^7 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6b7f7e657a786f6c63726f784a">[email protected]</a>^9

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

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

Method 3

This worked for me

npm install <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582c3931342f31363c3b2b2b1834392c3d2b2c">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1a1bea2a5b2a2a291bdb0a5b4a2a5">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0667737269767463606f7e6374466a6772637572">[email protected]</a>
npm install <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6410050d08130d0a00071717240a1409">[email protected]</a>:@tailwindcss/postcss7-compat <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4948b9790879797a4">[email protected]</a>^7 <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="640511100b141601020d1c011624">[email protected]</a>^9

Method 4

The issue is sometimes you install tailwind instead of tailwindcss

pnpm add tailwindcss

— not —

pnpm add tailwind

Method 5

This is simple way for Creating The Tailwind Configuration File

npm install <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8e9b93968d93949e998989ba969b8e9f898e">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85f5eaf6f1e6f6f6c5e9e4f1e0f6f1">[email protected]</a> <a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4f5b5a415e5c4b4847564b5c6e424f5a4b5d5a">[email protected]</a>
npx tailwindcss init

Method 6

Just use:-

yarn add [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

instead of,

npm install [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

This worked for me.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x