title: Tailwind css hover not changing text color
body: <p>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</p>
  <pre><code>&lt;button className=&quot;bg-yellow-500 px-4 py-2 hover:text-black text-white&quot;&gt;
          Some Text Here
   &lt;/button&gt;
  </code></pre>
  <p>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.</p>
  <p>Here is the tailwind.config file if it's necessay,</p>
  <pre><code>const colors = require(&quot;tailwindcss/colors&quot;);
  
  module.exports = {
    purge: [&quot;./src/**/*.{js,jsx,ts,tsx}&quot;],
    darkMode: false, // or 'media' or 'class'
    theme: {
      boxShadow: {
        sm: &quot;0 1px 5px #65656599&quot;,
      },
      extend: {
        fontFamily: {
          body: [&quot;Poppins&quot;],
        },
        colors: {
          black: {
            hakkei: &quot;#1a1a1a&quot;,
            DEFAULT: &quot;#000&quot;,
          },
          current: &quot;currentColor&quot;,
          gray: colors.blueGray,
          indigo: colors.indigo,
          red: colors.rose,
          yellow: colors.amber,
          blue: colors.blue,
          black: &quot;#333&quot;,
          white: &quot;#fff&quot;,
          aqua: {
            DEFAULT: &quot;#99ced3&quot;,
            dark: &quot;#8abbbf&quot;,
          },
          navy: {
            light: &quot;#99ced3&quot;,
            DEFAULT: &quot;#2f415d&quot;,
            dark: &quot;#1d2a3d&quot;,
            sky: &quot;#00afffc2&quot;,
          },
          purple: colors.purple,
        },
        borderRadius: {
          &quot;5xl&quot;: &quot;5rem&quot;,
          &quot;10xl&quot;: &quot;10rem&quot;,
          &quot;20xl&quot;: &quot;50%&quot;,
        },
        height: {
          120: &quot;32rem&quot;,
          150: &quot;40rem&quot;,
        },
      },
    },
    variants: {
      textColor: [&quot;responsive&quot;, &quot;hover&quot;, &quot;focus&quot;, &quot;group-hover&quot;],
    },
  
    plugins: [
      &quot;gatsby-plugin-postcss&quot;,
      //require('@tailwindcss/forms'),
      &quot;@tailwindcss-neumorphism&quot;,
    ],
  };
  
  </code></pre>