reactjstailwind-cssshadcnuitailwind-css-4

Error: 'could not determine executable to run' when initializing Tailwind CSS with shadcn/ui

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
  1. 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 npm@11.0.0 2 info using node@v20.18.0 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 tailwindcss@4.0.0 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?

Solution

  • 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:

    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.