Today has been a frustrating day as I am diving into the world of tailwindcss and have been struggling with a particular issue. My code is below:
<button className="bg-yellow-500 px-4 py-2 hover:text-black text-white">
Some Text Here
</button>
The problem I am facing is changing the text color to black when the button is hovered. Despite my efforts, it doesn't seem to work. Upon inspecting with Chrome DevTools, I noticed that the white text color has an !important rule applied, which I never defined nor intended to use. What's even more frustrating is that if the initial text color is not white, I can easily change it on hover to any other color. It should be a simple task but here I am stuck for hours.
If needed, here is my tailwind.config file provided below,
const colors = require("tailwindcss/colors");
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
boxShadow: {
sm: "0 1px 5px #65656599",
},
extend: {
fontFamily: {
body: ["Poppins"],
},
colors: {
// Color definitions here
},
borderRadius: {
// Border radius definitions here
},
height: {
// Height definitions here
},
},
},
variants: {
textColor: ["responsive", "hover", "focus", "group-hover"],
},
plugins: [
"gatsby-plugin-postcss",
// Other plugins listed here
],
};