reactjs – Error Installing Shadcn UI and Tailwind CSS in React.js Project with Vite

I’m trying to set up Shadcn UI in a new React.js project using Vite with JavaScript, but I’m encountering some issues. Here’s what I’ve done so far:
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?

Read more here: Source link