8

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:

  1. Created a new React.js project with Vite and selected JavaScript:

    npm create vite@latest my-project

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

  1. 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:

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

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

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

Improve this question
5

4 Answers 4

Reset to default
13

Update 2025-02-06

Migrate old Shadcn project

Now, Shadcn officially started supporting TailwindCSS v4. See:

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:

Some older features have been deprecated:

A CSS-first configuration has been implemented:

Changed TailwindCSS v3 installation steps

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

npm install -D tailwindcss@3

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.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. npm install -D [email protected] postcss autoprefixer It's works for me.
Yes, now you need to specify the version number for the v3 installation. Hopefully, the shadcn-ui update for v4 will be released soon as well.
@JahidulIslam If you found the answer helpful, mark it with a checkmark so the SO algorithm can recognize it as a resolved question and help other visitors.
The Shadcn documentation has been updated: ui.shadcn.com/docs/installation/manual. Now, only v4-compatible installations are officially available. For TailwindCSS v3, you need to follow the legacy docs: v3.shadcn.com/docs/installation/manual
1

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

Improve this answer

Comments

0

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

Improve this answer

2 Comments

Source
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
-1

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

Improve this answer

2 Comments

The question is specific to Tailwind 4 though, which can be used with the new canary release of the shadcn CLI. Suggesting a downgrade doesn't seem to be the solution here.
Correct observation, the idea of downgrading is generally the wrong approach. Abandoned versions should not be used. At least after a certain point, once v4 has gained stable support across all related packages, it will no longer be recommended at all.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.