Tailwind CSS v4 + Vite + React: npx tailwindcss init fails & styles not applied

[mustafa3mahmoud]

Tailwind CSS v4 in a Vite

I ran into a confusing issue while setting up Tailwind CSS v4 in a Vite + React project on Windows.

Environment :

• OS: Windows
• Node: v20.19.5
• npm: v10.8.2
• Vite: v7
• React: v19
• Tailwind CSS: v4.x

Problem Description :

While setting up Tailwind CSS v4 in a Vite + React project :

• Installed Tailwind :
  npm install -D tailwindcss postcss autoprefixer
• Tried to run initialization :
  npx tailwindcss init -p
• Error received :
  npm error could not determine executable to run

No tailwind.config.js or postcss.config.js is created.
Importing Tailwind in CSS (@import "tailwindcss";) did not apply any styles.
Silent failure, no runtime errors in browser.

Attempts that did NOT fix the problem :

• Reinstalling tailwindcss
• Clearing npx cache
• Using node_modules/.bin/tailwindcss
• Downgrading / upgrading Node
• Verifying npm versions

Root cause :

Tailwind CSS v4 no longer provides a CLI like v3,
and when using Vite + React, Tailwind v4 requires the Vite plugin.
Without the plugin, Tailwind fails silently.

Solution :

1) Install the Vite plugin :
npm install -D @tailwindcss/vite

2) Add it to vite.config.js :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3) Import Tailwind in your main CSS file :
@import "tailwindcss";

4) Restart the dev server :
npm run dev

After adding the plugin, Tailwind works immediately.

Recommendation :

Consider updating the documentation to clearly note that Tailwind CSS v4 requires the @tailwindcss/vite plugin for Vite projects. Without it, Tailwind may not work correctly in some setups, leading to silent failures or missing styles. Many users (including myself) have encountered this issue when setting up Tailwind v4 with Vite + React.

Hope this helps!