npx tailwindcss init not working
CreateSean opened this issue ยท 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.
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
Thanks, @JackWatling ... That was enough to get me up and running on v2.
can confirm.
there is a bug with compat mode and
npx tailwindcss init
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
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?
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.
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
updating to node v15 and yarn add autoprefixer
solved this issue for me
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.
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 ๐๐ป
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.
Upgrading to node 15 fixed it for me, 14.xx wasn't working.
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
@satyakresna - it would appear that upgrading to the latest (v15) node may be your answer.
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
@satyakresna - it would appear that upgrading to the latest (v15) node may be your answer.
Yes, I think so. Thank you.
Thanks a lot, @JackWatling you've really saved me from time wastage. Very handy.
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.
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.
How would one do this with yarn v2?
Please tell, problems
$ npx tailwindcss init
Error: EPERM: operation not permitted, mkdir 'C:\Users\Emran'
command not found: tailwindcss
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.
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
Thanx a lot buddy it worked
If i am going to install tailwindcss in React. On npx tailwindcss init comand i have many problems. Autoprefixer isn't find
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
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
thanks to you is now working
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
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.
@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 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.
@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.
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 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.
@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.
@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!
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.
Got it I see where people would run into this now! Updated the CRA instructions to use
tailwindcss-cli
instead oftailwindcss
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.
Just want to confirm that all is good now. Thanks so much.
Glad to see that the solution has been found! Thank you Adam!
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.
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
'tailwind' is not recognized as an internal or external command,
operable program or batch file
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.
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",
}
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!!
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