npx tailwindcss init not working #2831

CreateSean · 2020-11-19T22:49:06Z

Describe the problem:

Using tailwind in post-css compatibility mode

I've got tailwind 2.0 installed and the build process runs, however now I want to set up a config file so I can add custom colors etcetera. I run the npx tailwindcss init command and it fails with this output.

λ npx tailwindcss init
npx: installed 86 in 8.321s
Cannot find module 'autoprefixer'

I can see autoprefix in both package.json "autoprefixer": "^9.8.6", and the autoprefixer folder in the node_modules folder.

Not sure how to resolve this, please advise.

The text was updated successfully, but these errors were encountered:

JackWatling · 2020-11-20T09:01:25Z

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

jayspecies · 2020-11-20T10:19:27Z

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

Obiwarn · 2020-11-20T10:37:12Z

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

CreateSean · 2020-11-20T13:51:32Z

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

adamwathan · 2020-11-20T22:50:54Z

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?

saint-matt · 2020-11-20T23:00:04Z

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?

saint-matt · 2020-11-20T23:02:54Z

I got some warnings when I installed the packages, so maybe I need to update node actually

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for @tailwindcss/[email protected]: wanted: {"node":">=12.13.0"} (current: {"node":"11.6.0","npm":"6.14.9"})
npm WARN notsup Not compatible with your version of node/npm: @tailwindcss/[email protected]
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

saint-matt · 2020-11-20T23:09:58Z

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

GarrettWeinberg · 2020-11-21T16:26:32Z

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

JackWatling · 2020-11-21T17:59:41Z

I've stepped through the same commands Adam used above in a fresh directory and can confirm I had no issues this time. Prior, I was running an outdated node version when I was generating the configuration, so the upgrade to node v14 seems to have sorted it.

adamwathan · 2020-11-21T18:23:25Z

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 👍🏻

thepurpleblob · 2020-12-02T20:39:57Z

Just to note that I had node 12.8 with Ubuntu 20.10 and it didn't work as described above.

I junked it, installed nvm and the latest node (15.3.0) and then it worked fine. So possibly 12 isn't new enough. Certainly the stock versions that come with the latest Ubuntu (20.10) won't cut it.

Gitsack · 2020-12-03T05:19:58Z

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

kresnasatya · 2020-12-04T13:51:38Z

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

thepurpleblob · 2020-12-04T13:53:37Z

@satyakresna - it would appear that upgrading to the latest (v15) node may be your answer.

vickoman · 2020-12-04T16:44:32Z

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

kresnasatya · 2020-12-04T22:48:15Z

@satyakresna - it would appear that upgrading to the latest (v15) node may be your answer.

Yes, I think so. Thank you.

SamuelKinuthiaK · 2020-12-05T07:24:05Z

Thanks a lot, @JackWatling you've really saved me from time wastage. Very handy.

mirzobedil · 2020-12-05T18:22:32Z

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 works, thanks.

weerd · 2020-12-09T23:51:09Z

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.

javag97 · 2020-12-11T18:05:00Z

How would one do this with yarn v2?

emran899dev · 2020-12-12T15:09:57Z

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

Ade-Joshe · 2020-12-28T16:36:58Z

I ran into it some minutes ago and I just had to go through tailwind's documentation here and realised I skipped some installations @postcss and @autoprefixer.

weerd · 2021-01-04T05:43:35Z

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.

Adityakushwaha142 · 2021-05-07T18:21:23Z

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

Thanx a lot buddy it worked

Behruz0129 · 2021-05-09T10:05:50Z

If i am going to install tailwindcss in React. On npx tailwindcss init comand i have many problems. Autoprefixer isn't find

tadzyla · 2021-05-10T11:27:26Z

Tailwind CSS requires Node.js 12.13.0 or higher.

for me it worker this way

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

joshuaoyerinde · 2021-05-26T00:43:15Z

though is not showing me any error but the class is not working and i follow the normal procedure ... i did exactly what you did
@JackWatling

joshuaoyerinde · 2021-05-26T00:44:14Z

thanks to you is now working

Marvelxy · 2021-06-03T04:20:04Z

How would one do this with yarn v2?

$ yarn add tailwindcss
$ yarn add postcss 
$ yarn add autoprefixer

Updating to node 15 fixed my issue while running this

$ npx tailwindcss init

eyooooo · 2021-06-04T16:24:57Z

Just to comment on this unfortunately closed issue - Node 15 is NOT a LTS version. Node 14, as far as i know, is the most popular LTS version at this time. Tailwind UI not working straight out of the box with Node 14 is pretty insane.

adamwathan · 2021-06-04T16:30:02Z

@eyooooo Hey! Not sure what problem you are having but the CLI works as expected on node 14:

I'm confused though because you are talking about "Tailwind UI not working" which feels like a very different problem then "the CLI tool fails and doesn't generate a tailwind.config.js file".

If you are having some sort of issue with Tailwind UI + Node 14 please open an issue and explain the problem, happy to help.

eyooooo · 2021-06-04T16:37:15Z

@eyooooo Hey! Not sure what problem you are having but the CLI works as expected on node 14:

I'm confused though because you are talking about "Tailwind UI not working" which feels like a very different problem then "the CLI tool fails and doesn't generate a tailwind.config.js file".

If you are having some sort of issue with Tailwind UI + Node 14 please open an issue and explain the problem, happy to help.

Thanks so much for your reply @adamwathan. Following the instructions from tailwind, using node 14, i am unable to generate the tailwind.config.js file without doing the hacky version swapping and npm uninstall/install the diff versions. I am on Ubuntu 18.04 if that makes any difference.

My comments are just that of slight annoyance regarding this working properly with Node 15, and not 14 :) I have not tested that myself though.

Thanks.

Marvelxy · 2021-06-04T16:43:55Z

@eyooooo Hey! Not sure what problem you are having but the CLI works as expected on node 14:

I'm confused though because you are talking about "Tailwind UI not working" which feels like a very different problem then "the CLI tool fails and doesn't generate a tailwind.config.js file".
If you are having some sort of issue with Tailwind UI + Node 14 please open an issue and explain the problem, happy to help.

Thanks so much for your reply @adamwathan. Following the instructions from tailwind, using node 14, i am unable to generate the tailwind.config.js file without doing the hacky version swapping and npm uninstall/install the diff versions. I am on Ubuntu 18.04 if that makes any difference.

My comments are just that of slight annoyance regarding this working properly with Node 15, and not 14 :) I have not tested that myself though.

Thanks.

How did you install node? If you use nvm, you can easily switch between node versions.

adamwathan · 2021-06-04T16:45:09Z

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?

eyooooo · 2021-06-04T16:46:56Z

@eyooooo Hey! Not sure what problem you are having but the CLI works as expected on node 14:

I'm confused though because you are talking about "Tailwind UI not working" which feels like a very different problem then "the CLI tool fails and doesn't generate a tailwind.config.js file".
If you are having some sort of issue with Tailwind UI + Node 14 please open an issue and explain the problem, happy to help.

Thanks so much for your reply @adamwathan. Following the instructions from tailwind, using node 14, i am unable to generate the tailwind.config.js file without doing the hacky version swapping and npm uninstall/install the diff versions. I am on Ubuntu 18.04 if that makes any difference.
My comments are just that of slight annoyance regarding this working properly with Node 15, and not 14 :) I have not tested that myself though.
Thanks.

How did you install node? If you use nvm, you can easily switch between node versions.

using the standard install methods: https://github.com/nodesource/distributions/blob/master/README.md

I just dont think the issue should be closed because if users are following the exact instructions from TailWind and finding issues, thats bad. At the very least the tailwind docs should account for or document this stuff. I dont want to use tailwind at this point if I cant just install it and have it work right out the gate.

Finding the solution to my problems in a closed github issue doesnt make me feel good. Just a user perception comment.

eyooooo · 2021-06-04T16:48:18Z

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

Marvelxy · 2021-06-04T16:50:51Z

@eyooooo Hey! Not sure what problem you are having but the CLI works as expected on node 14:

I'm confused though because you are talking about "Tailwind UI not working" which feels like a very different problem then "the CLI tool fails and doesn't generate a tailwind.config.js file".
If you are having some sort of issue with Tailwind UI + Node 14 please open an issue and explain the problem, happy to help.

Thanks so much for your reply @adamwathan. Following the instructions from tailwind, using node 14, i am unable to generate the tailwind.config.js file without doing the hacky version swapping and npm uninstall/install the diff versions. I am on Ubuntu 18.04 if that makes any difference.
My comments are just that of slight annoyance regarding this working properly with Node 15, and not 14 :) I have not tested that myself though.
Thanks.

How did you install node? If you use nvm, you can easily switch between node versions.

using the standard install methods: https://github.com/nodesource/distributions/blob/master/README.md

I just dont think the issue should be closed because if users are following the exact instructions from TailWind and finding issues, thats bad. At the very least the tailwind docs should account for or document this stuff. I dont want to use tailwind at this point if I cant just install it and have it work right out the gate.

Finding the solution to my problems in a closed github issue doesnt make me feel good. Just a user perception comment.

I agree!

adamwathan · 2021-06-04T17:21:51Z

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.

eyooooo · 2021-06-04T17:24:25Z

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.

you're a friggin rockstar @adamwathan i will test and if you dont hear back from me assume all is good!!! thanks so much and have a wonderful weekend.

eyooooo · 2021-06-05T01:23:11Z

Just want to confirm that all is good now. Thanks so much.

Hamdrive · 2021-06-07T17:19:24Z

Glad to see that the solution has been found! Thank you Adam!

Hossain-Bin-Ishak · 2021-06-09T06:22:46Z

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 have followed the steps but still having the following error when I go to run npx tailwindcss-cli@latest init

These are the errors:

$ npx tailwindcss-cli@latest init -p
npm ERR! code ENOLOCAL
npm ERR! Could not install from "Hossain\AppData\Roaming\npm-cache_npx\14852" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\I'm Hossain\AppData\Roaming\npm-cache_logs\2021-06-09T06_19_24_000Z-debug.log
Install for [ 'tailwindcss-cli@latest' ] failed with code 1

Can anybody please help me to solve this problem?

Thanks in advanced.

MouadAmzil · 2022-01-11T13:37:12Z

npm install tailwindcss@latest postcss@latest autoprefixer@latest add this command before
and check your ### package.json

  "dependencies": {
      "autoprefixer": "^10.4.2",
      "postcss": "^8.4.5"
    }

add commend ### $ npx tailwindcss init
result -->
Created Tailwind CSS config file: tailwind.config.js

sherwinmartin · 2022-01-29T18:33:21Z

i ran into a similar issue. i fixed it by installing a more recent version of nodejs. the environment i was using is ubuntu but installed the nodejs using the default repo which has v10.x. i installed LTS v16.x and it works.

KarmaBlackshaw · 2022-09-05T04:24:36Z

Still running the same issue with vue2

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

Node: v14.18.3

{
  "vue": "^2.5.17",
  "autoprefixer": "^10.4.8",
  "postcss": "^8.4.16",
  "postcss-loader": "^4.3.0",
  "tailwindcss": "^3.1.8",
}

valeria-daffarra · 2022-11-21T16:44:40Z

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 LOVE YOU, thanks a lot!!

ghost · 2023-05-18T23:07:29Z

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. thank you very much

ANSWER - by tailwindlabs/tailwindcss#2831 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

*Fix TailwindCSS not recognized problem ANSWER - by tailwindlabs/tailwindcss#2831 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

adamwathan closed this as completed Nov 21, 2020

mpellegrini mentioned this issue Dec 1, 2020

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

Closed

QMaximillian added a commit to QMaximillian/flashcards-frontend that referenced this issue Apr 7, 2021

Run through steps mentioned here: tailwindlabs/tailwindcss#2831

9f162a4

npx tailwindcss init not working #2831

npx tailwindcss init not working #2831

Comments

CreateSean commented Nov 19, 2020 • edited Loading

Describe the problem:

JackWatling commented Nov 20, 2020 • edited Loading

jayspecies commented Nov 20, 2020

Obiwarn commented Nov 20, 2020

CreateSean commented Nov 20, 2020

adamwathan commented Nov 20, 2020 • edited Loading

saint-matt commented Nov 20, 2020

saint-matt commented Nov 20, 2020 • edited Loading

saint-matt commented Nov 20, 2020

GarrettWeinberg commented Nov 21, 2020

JackWatling commented Nov 21, 2020

adamwathan commented Nov 21, 2020

thepurpleblob commented Dec 2, 2020

Gitsack commented Dec 3, 2020

kresnasatya commented Dec 4, 2020 • edited Loading

thepurpleblob commented Dec 4, 2020

vickoman commented Dec 4, 2020

kresnasatya commented Dec 4, 2020

SamuelKinuthiaK commented Dec 5, 2020

mirzobedil commented Dec 5, 2020

weerd commented Dec 9, 2020

javag97 commented Dec 11, 2020

emran899dev commented Dec 12, 2020

Ade-Joshe commented Dec 28, 2020 • edited Loading

weerd commented Jan 4, 2021

Adityakushwaha142 commented May 7, 2021

Behruz0129 commented May 9, 2021

tadzyla commented May 10, 2021 • edited Loading

joshuaoyerinde commented May 26, 2021

joshuaoyerinde commented May 26, 2021

Marvelxy commented Jun 3, 2021 • edited Loading

eyooooo commented Jun 4, 2021

adamwathan commented Jun 4, 2021

eyooooo commented Jun 4, 2021

Marvelxy commented Jun 4, 2021

adamwathan commented Jun 4, 2021

eyooooo commented Jun 4, 2021

eyooooo commented Jun 4, 2021

Marvelxy commented Jun 4, 2021

adamwathan commented Jun 4, 2021

eyooooo commented Jun 4, 2021

eyooooo commented Jun 5, 2021

Hamdrive commented Jun 7, 2021

Hossain-Bin-Ishak commented Jun 9, 2021

MouadAmzil commented Jan 11, 2022

sherwinmartin commented Jan 29, 2022

KarmaBlackshaw commented Sep 5, 2022 • edited Loading

valeria-daffarra commented Nov 21, 2022

ghost commented May 18, 2023

CreateSean commented Nov 19, 2020 •

edited

Loading

JackWatling commented Nov 20, 2020 •

edited

Loading

adamwathan commented Nov 20, 2020 •

edited

Loading

saint-matt commented Nov 20, 2020 •

edited

Loading

kresnasatya commented Dec 4, 2020 •

edited

Loading

Ade-Joshe commented Dec 28, 2020 •

edited

Loading

tadzyla commented May 10, 2021 •

edited

Loading

Marvelxy commented Jun 3, 2021 •

edited

Loading

KarmaBlackshaw commented Sep 5, 2022 •

edited

Loading