reactjs - Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcnui - Stack Ov

admin管理员组

文章数量:1187338

I'm working on a React project and using shadcn/ui. I tried to install and set up Tailwind CSS using the following commands:

1. Installed Tailwind CSS, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

2. Tried to initialize the Tailwind CSS configuration:

npx tailwindcss init -p

However, when I ran the second command, I got the following error:

npm error could not determine executable to run npm error A complete log of this run can be found in: C:\Users\Pc\AppData\Local\npm-cache_logs<timestamp>-debug-0.log

log file:

0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using [email protected] 2 info using [email protected] 3 silly config load:file:C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\npmrc 4 silly config load:file:D:\ReactJS\travel-site.npmrc 5 silly config load:file:C:\Users\Pc.npmrc 6 silly config load:file:C:\Users\Pc\AppData\Roaming\npm\etc\npmrc 7 verbose title npm exec tailwindcss init -p 8 verbose argv "exec" "--" "tailwindcss" "init" "-p" 9 verbose logfile logs-max:10 dir:C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z- 10 verbose logfile C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z-debug-0.log 11 silly logfile start cleaning logs, removing 1 files 12 silly logfile done cleaning log files 13 silly packumentCache heap:2197815296 maxSize:549453824 maxEntrySize:274726912 14 verbose stack Error: could not determine executable to run 14 verbose stack
at getBinFromManifest (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\node_modules\libnpmexec\lib\get-bin-from-manifest.js:17:23) 14 verbose stack at exec (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\node_modules\libnpmexec\lib\index.js:202:15) 14 verbose stack at async Npm.exec (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\lib\npm.js:207:9) 14 verbose stack at async module.exports (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\lib\cli\entry.js:69:5) 15 verbose pkgid [email protected] 16 error could not determine executable to run 17 verbose cwd D:\ReactJS\travel-site 18 verbose os Windows_NT 10.0.19045 19 verbose node v20.18.0 20 verbose npm v11.0.0 21 verbose exit 1 22 verbose code 1 23 error A complete log of this run can be found in: C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z-debug-0.log

I've noticed that some others have reported the same issue, but I couldn't find a clear solution that worked for my case.

How can I fix this issue and successfully initialize Tailwind CSS using npx in my project?

I'm working on a React project and using shadcn/ui. I tried to install and set up Tailwind CSS using the following commands:

1. Installed Tailwind CSS, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

2. Tried to initialize the Tailwind CSS configuration:

npx tailwindcss init -p

However, when I ran the second command, I got the following error:

npm error could not determine executable to run npm error A complete log of this run can be found in: C:\Users\Pc\AppData\Local\npm-cache_logs<timestamp>-debug-0.log

log file:

0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js 1 info using [email protected] 2 info using [email protected] 3 silly config load:file:C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\npmrc 4 silly config load:file:D:\ReactJS\travel-site.npmrc 5 silly config load:file:C:\Users\Pc.npmrc 6 silly config load:file:C:\Users\Pc\AppData\Roaming\npm\etc\npmrc 7 verbose title npm exec tailwindcss init -p 8 verbose argv "exec" "--" "tailwindcss" "init" "-p" 9 verbose logfile logs-max:10 dir:C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z- 10 verbose logfile C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z-debug-0.log 11 silly logfile start cleaning logs, removing 1 files 12 silly logfile done cleaning log files 13 silly packumentCache heap:2197815296 maxSize:549453824 maxEntrySize:274726912 14 verbose stack Error: could not determine executable to run 14 verbose stack
at getBinFromManifest (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\node_modules\libnpmexec\lib\get-bin-from-manifest.js:17:23) 14 verbose stack at exec (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\node_modules\libnpmexec\lib\index.js:202:15) 14 verbose stack at async Npm.exec (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\lib\npm.js:207:9) 14 verbose stack at async module.exports (C:\Users\Pc\AppData\Roaming\npm\node_modules\npm\lib\cli\entry.js:69:5) 15 verbose pkgid [email protected] 16 error could not determine executable to run 17 verbose cwd D:\ReactJS\travel-site 18 verbose os Windows_NT 10.0.19045 19 verbose node v20.18.0 20 verbose npm v11.0.0 21 verbose exit 1 22 verbose code 1 23 error A complete log of this run can be found in: C:\Users\Pc\AppData\Local\npm-cache_logs\2025-01-25T08_30_42_408Z-debug-0.log

I've noticed that some others have reported the same issue, but I couldn't find a clear solution that worked for my case.

How can I fix this issue and successfully initialize Tailwind CSS using npx in my project?

• reactjs
• tailwind-css
• shadcnui
• tailwind-css-4

Share Improve this question Follow edited 2 days ago rozsazoltan 6,94855 gold badges1515 silver badges3434 bronze badges asked Jan 25 at 8:36 Haflan NistharHaflan Nisthar 4366 bronze badges 2

• 1 This question is similar to: Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – rozsazoltan Commented Jan 25 at 8:38
• Why not working TailwindCSS – rozsazoltan Commented Jan 25 at 8:39

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

We've discussed shadcn/ui in more detail, which, as of today, does not officially support v4. That is, the steps required for v4 installation are not present in its documentation.

The Shadcn UI installation with Vite guides are still based on TailwindCSS v3. You can either use them with npm install tailwindcss@3 or completely disregard them and follow the steps for TailwindCSS v4 instead:

• Installing TailwindCSS with Vite - v4 Docs (use instead of step#02 for TailwindCSS v4)
• shadcn-ui/ui #6446 - GitHub

• Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite - StackOverflow

Recently, we updated the v3 documentation with the TailwindCSS team. The new v3 installation is:

npm install tailwindcss@3

However, this was not reflected in the shadcn/ui documentation.

If you install TailwindCSS with this command, you'll be installing v3, and you can follow the old installation procedure. In other cases, you will be installing v4, which can be installed using the guide linked above and can be understood.

• Problem installing TailwindCSS after "npx tailwindcss init -p" command - StackOverflow

本文标签：