npx tailwindcss init not working

Question

npx tailwindcss init not working

CreateSean opened this issue 4 years ago · 49 comments

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.

Answer 1 · 2020-11-20T09:01:25.000Z

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

Answer 2 · 2020-11-20T10:19:27.000Z

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

Answer 3 · 2020-11-20T10:37:12.000Z

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

Answer 4 · 2020-11-20T13:51:32.000Z

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

Answer 5 · 2020-11-20T22:50:54.000Z

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?

Answer 6 · 2020-11-20T23:00:04.000Z

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?

Answer 7 · 2020-11-20T23:02:54.000Z

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/postcss7-compat@2.0.1: 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/postcss7-compat@2.0.1
npm WARN compat-test@1.0.0 No description
npm WARN compat-test@1.0.0 No repository field.

Answer 8 · 2020-11-20T23:09:58.000Z

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

Answer 9 · 2020-11-21T16:26:32.000Z

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

Answer 10 · 2020-11-21T17:59:41.000Z

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.

Answer 11 · 2020-11-21T18:23:25.000Z

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

Answer 12 · 2020-12-02T20:39:57.000Z

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.

Answer 13 · 2020-12-03T05:19:58.000Z

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

Answer 14 · 2020-12-04T13:51:38.000Z

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

Answer 15 · 2020-12-04T13:53:37.000Z

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

Answer 16 · 2020-12-04T16:44:32.000Z

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

Answer 17 · 2020-12-04T22:48:15.000Z

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

Yes, I think so. Thank you.

Answer 18 · 2020-12-05T07:24:05.000Z

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

Answer 19 · 2020-12-05T18:22:32.000Z

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.

Answer 20 · 2020-12-09T23:51:09.000Z

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.

Answer 21 · 2020-12-11T18:05:00.000Z

How would one do this with yarn v2?

Answer 22 · 2020-12-12T15:09:57.000Z

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

Answer 23 · 2020-12-28T16:36:58.000Z

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.

Answer 24 · 2021-01-04T05:43:35.000Z

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.

Answer 25 · 2021-05-07T18:21:23.000Z

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

Answer 26 · 2021-05-09T10:05:50.000Z

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

Answer 27 · 2021-05-10T11:27:26.000Z

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

Answer 28 · 2021-05-26T00:43:15.000Z

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

Answer 29 · 2021-05-26T00:44:14.000Z

thanks to you is now working

Answer 30 · 2021-06-03T04:20:04.000Z

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

Answer 31 · 2021-06-04T16:24:57.000Z

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.

Answer 32 · 2021-06-04T16:30:02.000Z

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

Answer 33 · 2021-06-04T16:37:15.000Z

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

Answer 34 · 2021-06-04T16:43:55.000Z

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

Answer 35 · 2021-06-04T16:45:09.000Z

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?

Answer 36 · 2021-06-04T16:46:56.000Z

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

Answer 37 · 2021-06-04T16:48:18.000Z

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

Answer 38 · 2021-06-04T16:50:51.000Z

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

Answer 39 · 2021-06-04T17:21:51.000Z

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.

Answer 40 · 2021-06-04T17:24:25.000Z

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.

Answer 41 · 2021-06-05T01:23:11.000Z

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

Answer 42 · 2021-06-07T17:19:24.000Z

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

Answer 43 · 2021-06-09T06:22:46.000Z

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.

Answer 44 · 2022-01-11T13:37:12.000Z

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

Answer 45 · 2022-01-21T20:36:30.000Z

'tailwind' is not recognized as an internal or external command,
operable program or batch file

Answer 46 · 2022-01-29T18:33:21.000Z

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.

Answer 47 · 2022-09-05T04:24:36.000Z

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",
}

Answer 48 · 2022-11-21T16:44:40.000Z

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!!

Answer 49 · 2023-05-18T23:07:29.000Z

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