Tailwind CSS Hover Effects Not Working on React Buttons

This repository demonstrates an uncommon bug where Tailwind CSS hover effects fail to work on buttons within a React application. The button styles are applied correctly initially, but the hover styles are not applied when the mouse hovers over the button.

Bug Description

The issue occurs when using Tailwind CSS classes for styling buttons within a React component. The button displays correctly with the initial styles, but the hover styles defined in the Tailwind CSS classes do not change when hovering the mouse.

Bug Reproduction

1. Clone this repository.
2. Run npm install to install the dependencies.
3. Run npm start to start the development server.
4. Observe the button; the hover effect does not work.

Solution

The solution is provided in bugSolution.js.