Tailwind CSS classes not applying correctly in Vite + React setup

[ZakariaMerghmi]

Hi Tailwind team,

I’m working on a Vite + React setup and successfully installed Tailwind CSS. Tailwind classes like bg-red-500 and text-3xl work fine on <h1> but they do not apply on <button> elements.
function App() { return ( <div className="bg-red-500"> <h1 className="text-white text-3xl">Hello world</h1> <button className="bg-amber-500 text-white px-4 py-2">Click Me</button> </div> ); }
What I’ve tried:
Tailwind is installed via npm install tailwindcss @tailwindcss/vite.

My vite.config.js includes the plugin correctly.

My index.css includes:

@import "tailwindcss";

I removed all custom CSS (like App.css) to rule out overrides.

Cleared browser and Vite caches, reinstalled node_modules.

Still, the button appears unstyled in the browser. Could this be an issue with Vite, Tailwind, or default browser button styles?

Thanks in advance for your help!

Best regards,
Zakaria

[ZakariaMerghmi]

Just wanted to share that I found the solution to my issue.

The problem was caused by default CSS applied to the <button> element in my index.css file (Vite template). Specifically, there was a background-color defined for button, like this:

css
Copier
Modifier
button { background-color: #1a1a1a; }
This was overriding the Tailwind class bg-amber-500 on my button.

✅ Solution:
I removed or commented out the default button styles in index.css, and now Tailwind utility classes apply correctly to the button.

Everything works great now.
Thanks for the support!

Best regards,
zakaria