22

I've been using TailwindCSS for my projects for a long time, and I'm used to first installing the package and then creating the tailwind.config.js file using the init process. I did the same for starting my new project, but I ran into an unexpected error: npm can't find the executable called by npx tailwindcss, even though I installed it.

So to reproduce it, you first need to install TailwindCSS (without any errors npm install -D tailwindcss) and then run the usual init process (command npx tailwindcss init -p). After that, you'll get the same output in the console that I experienced:

$ npm install -D tailwindcss
$ npx tailwindcss init -p

  npm error could not determine executable to run
  npm error A complete log of this run can be found in:
  ...

Why am I running into this error when it used to work before?

Improve this question
4
  • 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 become somewhat outdated. The command to run is now no longer npx tailwindcss but npx @tailwindcss/cli. Commented Jan 23 at 9:45
  • 2
    In addition to the above, TailwindCSS has a dedicated "TailwindCSS with Vite" installation guide (for V4) tailwindcss.com/docs/installation/using-vite Commented Jan 23 at 9:48
  • The question concerns the configuration that uses JavaScript, which has been removed starting from TailwindCSS v4, so I've re-added the javascript tag. The question is relevant specifically to TailwindCSS v4, so I'm explicitly associating it with that. For v3, you simply need to perform a version-specific installation - always be aware of which version of a package you're using. Commented Jun 17 at 11:32
  • ChatGPT and other AIs couldn't - or couldn't for a long time - answer this question because they rely on outdated, multi-year-old datasets in which the error described here didn't yet exist. The issue was caused by the new v4, which was only released in 2025, and at that time there were still very few articles or guides about it, so older v3 guides received stronger indexing. Commented Sep 8 at 10:30

7 Answers 7

Reset to default
47

TL;DR (for init process): Since v4, there is no need for a tailwind.config.js file, so the init process is also unnecessary, making both outdated. Review the v4 installation guides, where the init step is not included. Or install v3 with specifically changed guide.

TL;DR (for Tailwind CLI): Previous content + In v4, Tailwind CLI was separated from the core package, so an additional package needs to be installed see below and in How to use Tailwind CLI.

TailwindCSS v4

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

Changed npx tailwindcss to npx @tailwindcss/cli

The command 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 command line. For this, a standalone @tailwindcss/cli package will help from v4 onwards.

npm install tailwindcss @tailwindcss/cli

Deprecated init process

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

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

Other related changes from 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 command:

npm install tailwindcss@3
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

The v4 is so new that even the documentation isn't completely accurate yet. See here: tailwindcss.com/docs/installation/tailwind-cli, where the command provided is incorrect. However, the Upgrade Guide clearly specifies the necessary change.
issue #1955: Tailwind CLI installation docs fixed
Related: Tailwind CSS v4: more packages and new Vite support
5

The tailwind version has upgraded to v4, npx tailwindcss init -p this command 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(),
  ],
})
  1. in global css import tailwind classes @import "tailwindcss";

References for the above answer:

tailwind docs

Github Discussions

Improve this answer

Comments

2

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.

Improve this answer

3 Comments

I don't think you fully understand the breaking changes between v3 and v4. I would strongly caution against using this answer. The init process was removed in v4 for a reason. There's no need to go through such a complicated installation process.
The npx tailwindcss command has been deprecated and replaced with npx @tailwindcss/cli by @tailwindcss/cli package. It works the same way as the old command, except that from v4 onwards, you no longer need to run the init process for installation. Learn more: Problem installing TailwindCSS with "npx tailwindcss init -p" command and Use npx @tailwindcss/cli #1955 and Can't install TailwindCSS 4 standalone
Starting from v4, there is no need for a tailwind.config.js. Instead, use the CSS-first configuration with the new CSS directives. If you still prefer the legacy JS-based configuration, you can manually create the tailwind.config.js anywhere and reference it from CSS using @config. See more: TailwindCSS v4 is backwards compatible with v3 and New configuration option in v4
2

I had the same issues and I realized that all I needed was to downgrade from v4 to v3

  1. npm install tailwindcss@v3

  2. npm install -D tailwind-scrollbar@3

That's it!

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

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

Improve this answer

1 Comment

github.com/tailwindlabs/tailwindcss/discussions/15820
0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.