First mand runs without any errors npm install -D tailwindcss, when I use the second mand npx tailwindcss init -p, it gives me:

NPM error could not determine executable to run

I have tried most of the possible solutions from ChatGPT, or internet in general nothing seems to work.

First mand runs without any errors npm install -D tailwindcss, when I use the second mand npx tailwindcss init -p, it gives me:

NPM error could not determine executable to run

I have tried most of the possible solutions from ChatGPT, or internet in general nothing seems to work.

• javascript
• sass
• tailwind-css
• vite
• tailwind-css-4

Share Improve this question Follow edited Mar 5 at 10:34 rozsazoltan 10.5k66 gold badges1919 silver badges4949 bronze badges asked Jan 23 at 9:41 DHEERAJ KUMARDHEERAJ KUMAR 12111 gold badge11 silver badge33 bronze badges 2

• 3 More information is needed. Which versions are you using? AI software is never 100% up-to-date because dedicated users always provide great support with a slight delay for each new version. TailwindCSS has just released its new v4 version, so all the older v3 documentation has bee somewhat outdated. The mand to run is now no longer npx tailwindcss but npx @tailwindcss/cli. – rozsazoltan Commented Jan 23 at 9:45
• 2 In addition to the above, TailwindCSS has a dedicated "TailwindCSS with Vite" installation guide (for V4) tailwindcss./docs/installation/using-vite – Harrison Commented Jan 23 at 9:48

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 21

TailwindCSS v4

TailwindCSS has just released its new v4 version, so all the older v3 documentation has bee somewhat outdated.

• Upgrade guide - TailwindCSS v3 to v4

Changed npx tailwindcss to npx @tailwindcss/cli

The mand to run is now no longer npx tailwindcss but npx @tailwindcss/cli.

PostCSS plugin and CLI are separate packages — the main tailwindcss package doesn't include these anymore since not everyone needs them, instead they should be installed separately using @tailwindcss/postcss and @tailwindcss/cli.

---

Source: Open-sourcing our progress on Tailwind CSS v4.0 - Whats changed

This is basically only necessary if you're not using it with a framework and want to run it from the mand line. For this, a standalone @tailwindcss/cli package will help from v4 onwards.

npm install tailwindcss @tailwindcss/cli

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• TailwindCSS v4 Alpha: Using the CLI

Deprecated init process

In v4, the installation process has changed. It's now simpler. The init mand has bee obsolete and is no longer usable from v4 onwards because it's not needed anymore.

• tailwindlabs/tailwindcss #15791 - init process not available - GitHub

Using the upgrade tool

If you'd like to try upgrading a project from v3 to v4, you can use our upgrade tool to do the vast majority of the heavy lifting for you:

npx @tailwindcss/upgrade@next

• How to using the upgrade tool - Tailwind CSS v4 Docs
• Unable to upgrade Tailwind CSS v3 to v4 - Related: an interesting fact about this

Other related changes from v4

• Removed @tailwind directives
• Deprecated: Sass, Less and Stylus preprocessors support
• Automatic Source Detection from TailwindCSS v4

---

TailwindCSS v3

For a installation, you'll already be installing v4. However, if you want to install v3, use the old documentation with the following mand:

npm install tailwindcss@3

• Get started - TailwindCSS v3 Docs
• Cannot build frontend using Vite, TailwindCSS with PostCSS - StackOverflow

The tailwind version has upgraded to v4, npx tailwindcss init -p this mand will no longer work in the new update

for continuing with the old steps for installing tailwindcss run

npm install -D tailwindcss@3
npx tailwindcss init

To continue with the new veriosn of v4 tailwindcss see the below steps

1. npm install tailwindcss @tailwindcss/vite
2. import the plugin in vite config

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

3. in global css import tailwind classes @import "tailwindcss";

References for the above answer:

tailwind docs

Github Discussions

If you don't want to switch to v4 yet, just install v3:

npm install -D 'tailwindcss@^3'

P.S. Posting this as I'm not a frontend engineer and it took me some time to figure out how to do it.

You no longer need to do npx tailwindcss init -p according to tailwindcss v4 docs. Link: how to config it with vite

If you still wanna use npx tailwindcss init -p then you have to install v3 by using npm install -D tailwind@3, then you can proceed with npx tailwindcss init -p. Link: tailwindcss v3 docs installation guide

It seems to me that you need to be on tailwindcss v.3.x.x to run npx tailwindcss init to get the tailwindcss.config.js file in your project. Afterwards only then run npm install -D tailwindcss@latest to upgrade to v.4.

This is not super clear in the documentation or the discussions within the TailwindCSS repository on GitHub; the maintainers just say to use the tailwindcss cli tool, but that tooling doesn't generate the tailwindcss.config.js file, so I'm wondering if you have to manually create it if you're on v4 and not going through the gymnastics of downgrading first and then upgrading.

That part hasn't been made super clear to me in the docs, but I've had a lot of success with installing v3 first then upgrading.

In short, if you're already on v4 and need to downgrade to run npx tailwindcss init, run the following (you also won't have multiple instances of tailwindcss in your project, as-in, multiple versions lurking around):

npm uninstall tailwindcss

# If you've installed the CLI tool, you won't really need it, so you can remove it 
npm uninstall tailwindcss @tailwindcss/cli @tailwindcss/node 

npm install -D tailwindcss@3
npx tailwindcss init # to generate the tailwindcss.config.js file


# Next, you upgrade your project
npm install -D tailwindcss@latest

And you should be good to go.

Shadcn now officially supports TailwindCSS v4

If you want to upgrade your existing Shadcn project from TailwindCSS v3 to v4, refer to the official Shadcn documentation.

Previously, Shadcn UI installation guides for Vite were based on TailwindCSS v3. If you still want to use v3, you can install it with:

npm install tailwindcss@3

However, if you prefer TailwindCSS v4, make sure to follow the updated Tailwind v4 installation guide instead.

Summary: Shadcn now supports TailwindCSS v4. If you're using v3, install it with the mand above. For v4, follow the updated Shadcn documentation and the Tailwind v4 installation steps. This should help resolve any installation issues related to TailwindCSS versions.