Next.js - `npx tailwindcss init` fails with `npm error could not determine executable to run`

Problem

I tried to initialize Tailwind CSS in my Next.js project but encountered the following error:

> npm install tailwindcss @tailwindcss/postcss postcss autoprefixer

> npx tailwindcss init -p  
npm error could not determine executable to run
npm error A complete log of this run can be found in: ###

Environments

• Node.js: v22.13.1
• npm: 11.1.0
• Windows 11 Home

Solution

I tried the following command instead, and it worked for me:

> npx tailwindcss-cli@latest init
Created Tailwind CSS config file: tailwind.config.js

Although npx tailwindcss init -p also generates postcss.config.js, the solution one doesn't. You should create it manually.

postcss.config.js

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Reference:

You might also find this GitHub issue helpful:

I had trouble generating the configuration file while using the compatibility package. I updated my tailwindcss, postcss, and autoprefixer packages to the latest versions and this allowed me to generate a configuration successfully. I then downgraded my packages back to the compatibility versions.

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Also, don't forget to add these lines in globals.css for later steps.

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;