tailwindcss: npx tailwindcss init not working

I had trouble generating the configuration file while using the compatibility package. I updated my tailwindcss, postcss, and autoprefixer packages to the latest versions and this allowed me to generate a configuration successfully. I then downgraded my packages back to the compatibility versions.

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

I had trouble generating the configuration file while using the compatibility package. I updated my tailwindcss, postcss, and autoprefixer packages to the latest versions and this allowed me to generate a configuration successfully. I then downgraded my packages back to the compatibility versions.

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

This worked for me. Hacky but it worked

I have been run npx tailwindcss init and it shows Cannot find module ‘autoprefixer’.

Node version: 14.15.1 LTS NPM version: 6.14.9 OS: macOS Big Sur

UPDATE

I run instruction what @JackWatling said below and it works well.

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

Just an additional follow-up! Laravel Mix v6 with support for PostCSS v8 is out so you shouldn’t need to bother installing Tailwind using the PostCSS v7 compatibility mode 🙌

Just use the latest versions:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init

Worked great! For reference, I’m on Node 14.x LTS.

I had trouble generating the configuration file while using the compatibility package. I updated my tailwindcss, postcss, and autoprefixer packages to the latest versions and this allowed me to generate a configuration successfully. I then downgraded my packages back to the compatibility versions.

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

It worked! Thanks a lot

Yep, I updated to the latest version of node using

nvm install node --reinstall-packages-from=node

and then when I reran the steps @adamwathan posted, everything worked fine

If I follow the exact steps you posted above then I get the “Cannot find module ‘autoprefixer’” error shown in the original post. What debug can I provide you to help further?

Got it I see where people would run into this now! Updated the CRA instructions to use tailwindcss-cli instead of tailwindcss which should make it always work no matter what for everyone.

updating to node v15 and yarn add autoprefixer solved this issue for me

Just noting, I had the same issues as others are reporting here. I was on Node v10.x and hadn’t realized I needed to upgrade until seeing Adam’s comment. I jumped to Node v14.x and while the output was slightly different it still had pretty much the same error.

So confirming what others have stated and seems like the TailwindCSS compat version needs Node 15.x to work right. I ended up going with @JackWatling’s recommendation since I want to stick to an LTS release of Node and 14.x is the latest LTS available.

Upgrading to node 15 fixed it for me, 14.xx wasn’t working.

Alright so one thing we know for sure is you need to be on Node >= 12, since that’s the minimum version requirement for Tailwind CSS v2.0.

I’m going to close this as resolved since it seems like the steps I outlined above are working for everyone who has the correct Node version installed. If someone sees this and is still having this issues despite updating Node and following the exact instructions outlined above, please open a new issue 👍🏻

Thanks, @JackWatling … That was enough to get me up and running on v2.

One thing that should work for sure is if you use the dedicated separate CLI package:

npx tailwindcss-cli@latest init

If you are using the compat build, everything is unfortunately a huge pain in the ass. The root cause of all these problems is the CLI depends on peer-dependencies being installed, and npx doesn’t automatically install peer dependencies, and different versions of node seem to treat npx + peer-dependencies + package aliases differently.

I suspect we will drop support for the PostCSS 7 compat build completely very soon — PostCSS 8 is almost a year old and very few tools are left that are still stuck on PostCSS 7. What tool are you using that doesn’t support PostCSS 8 currently?

Can’t seem to reproduce here, here is the output I get running the steps in the instructions for the compat build from scratch:

Can someone share the exact steps they followed to achieve a different result?

@Marvelxy @adamwathan I am just following this guide https://tailwindcss.com/docs/guides/create-react-app where i just want to setup tailwind with a base react project.

Please tell, problems $ npx tailwindcss init Error: EPERM: operation not permitted, mkdir ‘C:\Users\Emran’ command not found: tailwindcss

can confirm. there is a bug with compat mode and npx tailwindcss init