How to Set Up Tailwind CSS in a React or Next.js Project (With Common Fixes)

Tailwind CSS is a utility-first CSS framework that makes styling easy, fast, and consistent. But if you’ve ever tried to install Tailwind in your React or Next.js project and hit a strange error like this:

npm ERR! could not determine executable to run

You're not alone — and here's how to fix it and set up everything from scratch.

Step 1: Create a React or Next.js Project

If you haven’t created your project yet:

For React:
npx create-react-app my-app cd my-app

For Next.js:
npx create-next-app@latest my-app cd my-app

Step 2: Install Tailwind CSS

Now install Tailwind and its dependencies using:

npm install -D tailwindcss postcss autoprefixer

Error You Might See

You might encounter this error after trying:

npx tailwindcss init -p

npm ERR! could not determine executable to run
npm ERR! A complete log of this run can be found in:
C:\Users<your-user>\AppData\Local\npm-cache_logs<timestamp>-debug-0.log

Fixing the Issue

To resolve this, install a specific version of Tailwind that works:

npm install -D tailwindcss@3.4.17

Now run the init command again:
npx tailwindcss init -p

You should now see two files:

• tailwind.config.js

• postcss.config.js

Step 3: Configure tailwind.config.js

Open the tailwind.config.js file and replace the content array like this:
content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ]

Step 4: Update index.css

In your src/index.css, add the Tailwind directives at the top:
@tailwind base; @tailwind components; @tailwind utilities;

Step 5: Start Using Tailwind!

Now you're ready to use Tailwind classes in your components.