0

I'm encountering a persistent issue setting up Tailwind CSS v4 in a Vite + React project on Windows 10/11. The core problem is that the tailwindcss CLI command is unavailable after installation via either npm or yarn.

Environment:

OS: Windows 10 / Windows 11 (User should specify exact one if known) Node.js: v22.14.0 npm: 10.9.2 Yarn: v1.22.22 Project: Minimal Vite (^6.2.0) + React (^19.0.0) project Tailwind: Tried tailwindcss@^4.1.3 and tailwindcss@^4.0.0 PostCSS: postcss@^8.5.3 Autoprefixer: autoprefixer@^10.4.21 Vite Config: Using @tailwindcss/postcss plugin correctly in vite.config.js.

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/postcss' // Correct import for v4

// [https://vitejs.dev/config/](https://vitejs.dev/config/)
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        tailwindcss(), // Correct usage
        // autoprefixer(), // Also installed
      ],
    },
  },
})


// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

css

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Problem Details:

After running npm install or yarn install, I cannot execute any Tailwind CLI commands:

npx tailwindcss ... fails (command not found). npm exec -- tailwindcss ... fails (command not found). npm run <script_using_tailwindcss> fails. Investigating the node_modules directory revealed two key issues:

The node_modules/.bin/ directory does not contain tailwindcss, tailwindcss.cmd, or tailwindcss.ps1 executables/links. Other package binaries (like vite, eslint) are present. Crucially, when inspecting the installed package itself at node_modules/tailwindcss/package.json, the "bin" section (which should define the CLI entry point) is completely missing. This seems to indicate a corrupted or incomplete installation of the tailwindcss package itself.

Troubleshooting Steps Taken (None Resolved the Issue):

  • Clean Installs: Repeatedly deleted node_modules, package-lock.json, and yarn.lock, followed by npm install or yarn install.

  • Cache Cleaning: Cleared npm cache (npm cache clean --force) and yarn cache (yarn cache clean).

  • Tried Different Package Managers: Used both npm and yarn

  • Tried Different Tailwind Versions: Tested tailwindcss@^4.1.3 and
    tailwindcss@^4.0.0.

  • Run as Administrator: Ran the install commands (npm install, yarn
    install) from a PowerShell terminal opened "as Administrator".

  • Disabled Antivirus: Temporarily disabled Windows Defender Real-time
    protection during the installation process.

  • Verified Node/npm/Yarn: Versions are up-to-date and seem functional
    for other packages.

  • Tried Direct Script Execution (Failed): Cannot use the workaround
    node ./node_modules/tailwindcss/path/to/cli.js because the missing
    "bin" section in package.json means we don't know the correct script path for v4.

Despite all these steps, the tailwindcss package consistently installs without its necessary binary links and, more worryingly, without the "bin" entry in its own package.json.

Question:

Has anyone encountered a similar issue where a specific npm package (like tailwindcss) fails to install its binaries and even seems to have a corrupted package.json (missing "bin") on Windows? What could be causing this specific package installation to fail so fundamentally, and what other diagnostic steps or solutions could I try?

Thanks in advance for any help!

5

1 Answer 1

1

To answer your immediate question, the Tailwind CLI interface is in a separate NPM package, @tailwindcss/cli, that you'd install like:

$ npm install @tailwindcss/cli

However, Vite integration does not need this package (or PostCSS) and you should be using the Tailwind Vite plugin. You seem to be following old installation procedures. Consider following the contemporary installation instructions for Vite.

Sign up to request clarification or add additional context in comments.

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.