Unable to setup tailwind in react + vite

[curiouscatcode]

🐛 Bug: Unable to run npx tailwindcss init -p in React + Vite setup

❓ Problem Summary

I am trying to set up Tailwind CSS in a React + Vite project, but running npx tailwindcss init -p gives me the following error:

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hp\AppData\Local\npm-cache\_logs\2025-06-06T04_58_31_989Z-debug-0.log

Despite Tailwind CSS being present in node_modules, there is no tailwindcss binary inside node_modules/.bin — hence, npx cannot run it.

---

🔍 Reproduction Steps

1. Created a new folder:
   mkdir tailwindCSS_tutorial && cd tailwindCSS_tutorial

2. Initialized a Vite React project:
   npm create vite@latest tailwind_freecodecamp -- --template react

3. Installed dependencies:

   cd tailwind_freecodecamp
   npm install
   npm install -D tailwindcss postcss autoprefixer
   

4. Tried to initialize Tailwind config:
   npx tailwindcss init -p

💥 Error occurred:

npm ERR! could not determine executable to run

---

📦 Current Environment

• OS: Windows 10
• Node: v22.14.0
• npm: 10.9.2
• Tailwind version: Tried latest (4.1.8)
• Project Folder: C:\Users\hp\OneDrive\Desktop\tailwindCSS_tutorial\tailwind_freecodecamp

---

🔎 Observations

• Running npm ls tailwindcss confirms Tailwind is installed:

  └── tailwindcss@4.1.8
  

• But there is no executable file generated in node_modules/.bin/ for Tailwind CSS.

• Hence, this fails:

  .\node_modules\.bin\tailwindcss init -p
  > '.\node_modules\.bin\tailwindcss' is not recognized as an internal or external command
  

• Installing Tailwind v3.x (e.g., tailwindcss@3.4.3) does create .bin/tailwindcss, and the init command works fine.

• However, in that case, VS Code gives 3 problems in index.css like:

  {
    "message": "Unknown at rule @tailwind",
    "source": "css",
    "code": "unknownAtRules",
    "severity": 4
  }

---

📌 What I Tried

• Reinstalling Node.js
• Cleaning npm cache: npm cache clean --force
• Deleting and re-installing node_modules, package-lock.json
• Using both global and local installs
• Verified tailwind.config.js, postcss.config.js, and project structure — everything was correct
• Made sure Tailwind CSS IntelliSense extension is installed in VS Code

---

❗ Expected Behavior

• After installing Tailwind with npm install -D tailwindcss, running npx tailwindcss init -p should work by default.
• node_modules/.bin/tailwindcss should exist and be runnable.

---

📩 Request

Please look into why:

• npx tailwindcss fails to detect the executable in Tailwind v4+
• .bin/tailwindcss is missing in V4, but not in V3
• VS Code shows @tailwind as unknown rule even when IntelliSense is installed

---

The problem is when i install the way it is told in the docs, it gets install but tailwind.config.js and postcss.config.js aren't made which according to the tutor i am following said is needed to customize, dark mode and etc

[wongjn]

The init command no longer exists in the most recent major version of Tailwind. Consider checking the installation documentation that is most relevant to your project to integrate Tailwind CSS properly.

If you are trying to use v3, ensure the version qualifier is used:

$ npm install -D tailwindcss@3 postcss autoprefixer
$ npx tailwindcss init -p