Tailwind Css (npm error could not determine executable to run)

[lizk6650-dot]

Select Topic Area

Show & Tell

Body

[conorheffron]

@lizk6650-dot

The tailwind version has upgraded to v4, npx tailwindcss init -p this command will no longer work beyond v3.

For v3, try:

npm install -D tailwindcss@3
npx tailwindcss init

For upgrade to v4 tailwindcss, try:

npm install tailwindcss @tailwindcss/vite

Import the plugin in vite config:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

For global css import tailwind classes:

@import "tailwindcss"; 

More Info:

• https://github.com/conorheffron/mern-sandbox/blob/main/mern-sandbox/client/tailwind.config.js (I started using v3 3.4.1 here)
• https://tailwindcss.com/docs/installation/using-vite
• Unable to Run npx tailwindcss init -p - "Could Not Determine Executable to Run" tailwindlabs/tailwindcss#15820

[conorheffron]

@lizk6650-dot Thanks for response, please mark post as 'answered' if it helped to solve your issue so the response is highlighted for others in the future.

more info on this from GitHub here

[lizk6650-dot]

Answered

[conorheffron]

@lizk6650-dot Apologies, I meant the ticket status, it still reads as 'Unanswered', sometimes need to re-open and close with state/tag 'Answered' on the relevant comment/post.

[zainali0303]

With Tailwind v4, the npx tailwindcss init -p command is no longer supported, changing how projects are configured. When working with Tailwind OKLCH colors, developers now rely more on CSS-first configuration, using native CSS variables and OKLCH color values to build scalable and dynamic theming without the older config initialization workflow.
The complete Tailwind CSS color reference. Instantly copy Hex, RGB, HSL, and OKLCH codes for Tailwind v4 and v3. The modern, responsive color picker for developers.