From Confusion to Clarity: How I Finally Installed Tailwind CSS in My React Project

I remember spending hours trying to set up Tailwind CSS in my React project and failing, again and again.

At first, I followed the docs blindly:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

But I kept getting error after error:

'tailwind' is not recognized as an internal or external command

Even worse ,my styles weren't being applied and I had no clue why.

---

🔎 The Mistakes I Made:

• I installed the wrong version of Tailwind (v4 instead of v3) for my react-scripts setup.

• I didn't configure my postcss.config.js properly.

  Main issue was the version of tailwind I was using. Latest version was installed which was not compatible with my app.

---

✅ The Fix That Worked:

Here’s the clean, working setup that finally got Tailwind working in my Create React App:

1. Installed correct dependencies:

npm install -D tailwindcss@3.3.3 postcss autoprefixer
npx tailwindcss init -p

2. tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. And finally, imported index.css in index.js:

import './index.css';

---

💡 Lesson Learned:

Reading documentation is one thing. Understanding your project setup is another.
I learned that not every error means you did everything wrong. Sometimes, it's just the wrong version or missing config.

---

📌 Final Tip:

If you're using create-react-app (React Scripts), use Tailwind v3 unless you're upgrading your build system (e.g., Vite or Next.js).