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?
8 Answers 8
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.
- Upgrade guide - TailwindCSS v3 to v4
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
tailwindcsspackage doesn't include these anymore since not everyone needs them, instead they should be installed separately using@tailwindcss/postcssand@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
- 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 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
- 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
@import "tailwindcss";does not work when used in a file with an.scssextension- Automatic Source Detection from TailwindCSS v4
- Adding an external source or a package from within node_modules for detection
- [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin
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
- Get started - TailwindCSS v3 Docs
- Cannot build frontend using Vite, TailwindCSS with PostCSS - StackOverflow
4 Comments
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
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(),
],
})
- in global css import tailwind classes
@import "tailwindcss";
References for the above answer:
Comments
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.
3 Comments
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 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 I had the same issues and I realized that all I needed was to downgrade from v4 to v3
npm install tailwindcss@v3npm install -D tailwind-scrollbar@3
That's it!
Comments
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.
Comments
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
1 Comment
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.
Comments
For me, the process of installing with NPM failed; instead, I prefer that you create a Tailwind CSS binary using sources from GitHub and host it on your website.
8 Comments
init process. If you still need one, it is provided by the @tailwindcss/cli package, or it is included in the binary, but it is not required. Please interpret the explanation above accordingly: stackoverflow.com/a/79380522/15167500 Explore related questions
See similar questions with these tags.
npx tailwindcssbutnpx @tailwindcss/cli.