javascript - Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite - Stack Overflow

admin2025-04-19 6

I'm trying to set up Shadcn UI in a new React.js project using Vite with JavaScript, but I'm encountering some issues.

Steps Taken for Shadcn UI:

Created a new React.js project with Vite and selected JavaScript:
```
npm create vite@latest my-project
```
Ran the following command to install Tailwind CSS dependencies:
```
npm install -D tailwindcss postcss autoprefixer
```

However, the tailwind.config.js and postcss.config.js files were not generated automatically.

As per the Shadcn UI docs, I ran:
```
npx tailwindcss init
```

But I encountered the following error:

npm ERR! could not determine executable to run

I also tried installing Tailwind CSS v3 using the official Tailwind CSS docs for Vite, but faced a similar issue. Here's what I did:

Ran the command:

npm install -D tailwindcss postcss autoprefixer

But again, the tailwind.config.js and postcss.config.js files were not generated as expected.

Ran the next command as instructed:

npx tailwindcss init

And encountered the same error:

npm ERR! could not determine executable to run.

Questions:

Why aren’t the tailwind.config.js and postcss.config.js files being generated automatically when running the installation commands?
How can I resolve the error npm ERR! could not determine executable to run when initializing Tailwind CSS or Shadcn UI?
Is there a specific configuration or prerequisite I might be missing for setting up Shadcn UI in a React.js (Vite + JavaScript) project?

I'm trying to set up Shadcn UI in a new React.js project using Vite with JavaScript, but I'm encountering some issues.

Steps Taken for Shadcn UI:

Created a new React.js project with Vite and selected JavaScript:
```
npm create vite@latest my-project
```
Ran the following command to install Tailwind CSS dependencies:
```
npm install -D tailwindcss postcss autoprefixer
```

However, the tailwind.config.js and postcss.config.js files were not generated automatically.

As per the Shadcn UI docs, I ran:
```
npx tailwindcss init
```

But I encountered the following error:

npm ERR! could not determine executable to run

I also tried installing Tailwind CSS v3 using the official Tailwind CSS docs for Vite, but faced a similar issue. Here's what I did:

Ran the command:

npm install -D tailwindcss postcss autoprefixer

But again, the tailwind.config.js and postcss.config.js files were not generated as expected.

Ran the next command as instructed:

npx tailwindcss init

And encountered the same error:

npm ERR! could not determine executable to run.

Questions:

Why aren’t the tailwind.config.js and postcss.config.js files being generated automatically when running the installation commands?
How can I resolve the error npm ERR! could not determine executable to run when initializing Tailwind CSS or Shadcn UI?
Is there a specific configuration or prerequisite I might be missing for setting up Shadcn UI in a React.js (Vite + JavaScript) project?

Share Improve this question edited Mar 5 at 10:28 rozsazoltan 11.4k6 gold badges21 silver badges60 bronze badges asked Jan 28 at 12:46 Jahidul Islam 512 silver badges2 bronze badges

Are you using tailwind v4 ? – Raja Jahanzaib Commented Jan 28 at 12:47
Yes and I have tried v3 also but same issue. – Jahidul Islam Commented Jan 28 at 13:08
This question is similar to: Cannot build frontend using Vite, TailwindCSS with PostCSS. 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 28 at 13:31
A few days ago, Shadcn officially started supporting TailwindCSS v4; See: shadcn-ui/ui #6427 and Shadcn UI with TailwindCSS v4 – rozsazoltan Commented Feb 10 at 17:56
And: How to upgrade your Shadcn project from TailwindCSS v3 to v4 – rozsazoltan Commented Feb 10 at 18:28

Add a comment |

4 Answers 4

Sorted by: Reset to default 10

Update 2025-02-06

Migrate old Shadcn project

Now, Shadcn officially started supporting TailwindCSS v4. See:

How to upgrade your Shadcn project from TailwindCSS v3 to v4 - Shadcn Docs
- TailwindCSS upgrade guide - TailwindCSS v3 to v4
- Shadcn upgrade guide - Shadcn Docs
- React upgrade guide - React 18 to 19
- Update your dependencies - Shadcn Upgrade Guide
- Remove forwardRef - Shadcn Upgrade Guide
shadcn-ui/ui #6585: Known issues - GitHub

Start new Shadcn project with TailwindCSS v4

If you're starting a new project with Tailwind v4 and React 19, use the canary version of the command-line:

npx shadcn@canary init

v4 breaking changes compared to v3

There have been several updates in TailwindCSS v4.

The installation process has changed:

Upgrade guide - TailwindCSS v3 to v4

Some older features have been deprecated:

Changed npx tailwindcss to npx @tailwindcss/cli - TailwindCSS v4 Docs
Removed npx tailwindcss init process - StackOverflow
Deprecated: Sass, Less and Stylus preprocessors support - StackOverflow

A CSS-first configuration has been implemented:

CSS-first configuration instead of tailwind.config.js - TailwindCSS v4 Docs
Use @config directive to legacy JavaScript-config - StackOverflow
Automatic Source Detection - StackOverflow

Changed TailwindCSS v3 installation steps

npm i tailwindcss installs v4 by default. To install v3, use:

npm install -D tailwindcss@3

TailwindCSS v3 installation guide with Vite - TailwindCSS v3 Docs

Answers based on the above information

Why aren't the tailwind.config.js and postcss.config.js files being generated automatically when running the installation commands?

The init process has been removed. There is no longer a need for tailwind.config.js, so nothing is automatically created anymore. However, you can still make it available using the @config directive and create it manually.

How can I resolve the error npm ERR! could not determine executable to run when initializing Tailwind CSS or Shadcn UI?

This error typically occurs when there is an issue with the command being run, such as a missing or incorrect executable. From the context, I infer that you're trying to run the init process, but as I mentioned, it has been deprecated.

Unable to Run npx tailwindcss init -p - "Could Not Determine Executable to Run" - Github
Problem installing TailwindCSS with "npx tailwindcss init -p" command - StackOverflow

Is there a specific configuration or prerequisite I might be missing for setting up Shadcn UI in a React.js (Vite + JavaScript) project?

I think the difference between v3 and v4 is causing some confusion right now. If you go through these and cleanly install/migrate from your v3 project to the v4 version, everything should work afterward.

shadcn/app-tailwind-v4 - GitHub
shadcn/ui #2996 - GitHub

Shadcn UI installation docs (step #02)

Update: Although the TailwindCSS v4 compatibility guide was released on 2025-02-06, the documentation still incorrectly instructs installing TailwindCSS v3 with Vite. To install v3, a version specifier (tailwindcss@3) must be added to the command, as npm install tailwindcss now defaults to the latest version, which is v4. See: shadcn-ui/ui #6632.

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: Not validating after Tailwind v4 update - GitHub
shadcn-ui/ui #6427: Upgrade to TailwindCSS v4 - GitHub
shadcn-ui/ui #6585: Tailwind v4 and React 19 - GitHub

npx is not finding the correct executable in your project. This is due to a version change in tailwindcss.

It is because tailwind 4 has different way of installing you should use outdated version 3 version or follow tailwind new documentation to setup the whole way of working

for newer version of tailwind shadcn have started working till you can use old one by installing npm install -D [email protected] postcss autoprefixer

转载请注明原文地址:http://anycun.com/QandA/1745022632a90349.html