CODEWITHSUNDEEP
javascriptsasstailwind-cssvitetailwind-css-4
DHEERAJ KUMAR
DHEERAJ KUMAR

Reputation: 101

Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command

First command runs without any errors npm install -D tailwindcss, when I use the second command 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.

Upvotes: 10

Views: 10010

Answers (6)

Duygu Eroğlu
Duygu Eroğlu

Reputation: 29

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.

Upvotes: 1

Alex7
Alex7

Reputation: 1

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.

Upvotes: 0

rozsazoltan
rozsazoltan

Reputation: 9073

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

Upvotes: 16

Jasvinder singh
Jasvinder singh

Reputation: 61

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

Upvotes: 2

GauravGhosh
GauravGhosh

Reputation: 11

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

Upvotes: 1

simplylizz
simplylizz

Reputation: 1704

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.

Upvotes: 1

Related Questions