Tailwind css hover not changing text color

Question

I am completely new to this tailwindcss and I have been stuck at this problem for the entire day. I am so frustrated. Here is my code

<button className="bg-yellow-500 px-4 py-2 hover:text-black text-white">
        Some Text Here
 </button>

What I want to achieve is to change the text color when the button is hovered, current text color is white and I want it to change to black. It didn't work. When I use chrome inspect tool, I found that the text color white has !important which I don't know how it happened. I didn't define it, don't even know how to. What's even worst is that I can change the text color to any color when it's hovered if it's original color is not white. I can have another color initially other than white and change it to whatever color I like. As you can see, its very simple. I can do it with pure css in like 10 s, no need to for an entire day. Please, help me out here.

Here is the tailwind.config file if it's necessay,

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: {
        black: {
          hakkei: "#1a1a1a",
          DEFAULT: "#000",
        },
        current: "currentColor",
        gray: colors.blueGray,
        indigo: colors.indigo,
        red: colors.rose,
        yellow: colors.amber,
        blue: colors.blue,
        black: "#333",
        white: "#fff",
        aqua: {
          DEFAULT: "#99ced3",
          dark: "#8abbbf",
        },
        navy: {
          light: "#99ced3",
          DEFAULT: "#2f415d",
          dark: "#1d2a3d",
          sky: "#00afffc2",
        },
        purple: colors.purple,
      },
      borderRadius: {
        "5xl": "5rem",
        "10xl": "10rem",
        "20xl": "50%",
      },
      height: {
        120: "32rem",
        150: "40rem",
      },
    },
  },
  variants: {
    textColor: ["responsive", "hover", "focus", "group-hover"],
  },

  plugins: [
    "gatsby-plugin-postcss",
    //require('@tailwindcss/forms'),
    "@tailwindcss-neumorphism",
  ],
};

Answer 1

You have defined black twice. If you want the default value for black to be #333 then just add that value like the following:

      colors: {
        black: {
          hakkei: "#1a1a1a",
          DEFAULT: "#333", // it was #000 before
        },

and remove the other line between blue and white.