import React from 'react';
import './index.css';

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">React App</h1>
      <button className="p-8 m-8 bg-amber-300 text-amber-50 hover:text-amber-950 hover:bg-black ">
        Add
      </button>
    </div>
  );
}

export default App;

// index.css 
@import "tailwindcss";

I tried to reinstall the tailwind css, I tried to create new property in theme as the official website recommended to do.

import React from 'react';
import './index.css';

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">React App</h1>
      <button className="p-8 m-8 bg-amber-300 text-amber-50 hover:text-amber-950 hover:bg-black ">
        Add
      </button>
    </div>
  );
}

export default App;

// index.css 
@import "tailwindcss";

I tried to reinstall the tailwind css, I tried to create new property in theme as the official website recommended to do.

• javascript
• reactjs
• tailwind-css
• tailwind-css-4

• 1 to make sure you take full advantage of tailwind, your index.css should include the proper tailwind directives, e.x. base, components and utilities. – Stan Commented Mar 3 at 4:37
• What's your build step? Are you using vite? @Stan the directives aren't needed with v4 when using the vite plugin – ooshp Commented Mar 3 at 6:24
• 1 Am using vite plugin – Abdu Seid Commented Mar 3 at 6:29
• The issue you described cannot be reproduced. Therefore, it's important to provide a reliable reproduction for this type of problem. I have a strong hunch that something is overriding the settings of the generated classes. See more: if use stronger rule (by external plugin or CSS) like this, then your issue can be triggered – rozsazoltan Commented Mar 3 at 10:11
• Is there any change if you change the button element to a div? And does the cursor change to a pointer when you mouse over the button? Smells like it could be either pointer events or button styles being overridden – ooshp Commented Mar 4 at 7:23

3 Answers 3

This issue might be because of absence of postcss.config.mjs, make sure you have postcss installed in the project.

npm i @tailwindcss/postcss postcss

Also create a file named postcss.config.mjs in your root folder with the following code.

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

This might work, otherwise add some more detail about the issue.

To use Vite React with tailwind css v4.0, follow these steps::

1.Install Tailwind CSS

open terminal and install tailwindcss and @tailwindcss/vite via npm

npm install tailwindcss @tailwindcss/vite

2.Configure the Vite plugin

add the tailwindcss/vite plugin to your Vite configuration vite.config.ts

    import { defineConfig } from 'vite'
        import tailwindcss from '@tailwindcss/vite'
        export default defineConfig({
          plugins: [
            tailwindcss(),
          ],
        })

3.Import Tailwind CSS add an @import to your index.css file that imports Tailwind CSS

     @import "tailwindcss";

4.Start your build process

Run your build process with npm run dev

npm run dev

TLDR: The error cannot be reproduced; it's likely that a style or external plugin you're using is overriding the button hover styling.

Since you specifically pointed out that the hover state isn't working, I assume that everything else is functioning correctly, meaning you've properly configured v4.

Starting from TailwindCSS v4, TailwindCSS classes have become weaker when nested within @layer base and @layer components. As a result, any directly implemented CSS rules can be stronger, meaning a button:hover { color: blue; } style can simply override the hover:text-green-500 class from TailwindCSS.

const { useState, useEffect } = React;

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">React App</h1>
      <button className="p-8 m-8 bg-amber-300 text-amber-50 hover:text-amber-950 hover:bg-black">
        Add
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<script src="https://cdnjs.cloudflare/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

<script src="https://unpkg/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss"></style>

<div id="root"></div>

However, if I add an external, stronger rule like this, then your issue can be triggered. The solution is to review your source code (for example, F12 dev-tools can help you check which rules are being applied to the button and where they are being loaded from in your project).

const { useState, useEffect } = React;

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">React App</h1>
      <button className="p-8 m-8 bg-amber-300 text-amber-50 hover:text-amber-950 hover:bg-black">
        Add
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

button:hover {
  background-color: unset;
  color: unset;
}

<script src="https://cdnjs.cloudflare/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

<script src="https://unpkg/@tailwindcss/browser@4"></script>

<div id="root"></div>

Alternatively, you can use !important classes, though I would recommend looking for the source of the issue instead.

hover:text-amber-950! hover:bg-black!

• Using the important modifier

const { useState, useEffect } = React;

function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">React App</h1>
      <button className="p-8 m-8 bg-amber-300 text-amber-50 hover:text-amber-950! hover:bg-black!">
        Add
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

button:hover {
  background-color: unset;
  color: unset;
}

<script src="https://cdnjs.cloudflare/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

<script src="https://unpkg/@tailwindcss/browser@4"></script>

<div id="root"></div>