Tailwind text color not changing on hover

Question

I'm trying to get the text color in a button to change when I hover over it but it doesn't work... My React code is this

<button className="px-4 py-2 bg-blue-500 text-light hover:bg-light hover:border-2 hover:border-blue-500 hover:text-blue-500">Sign Up</button>

and my tailwind config file looks like this

const colors = require("tailwindcss/colors");

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                light: "#e2f3f5",
                teal: "#22d1ee",
                blue: "#3d5af1",
                dark: "#0e153a",
            },
        },
    },
    variants: {
        extend: {
            fontSize: ["hover", "focus"],
            backgroundOpacity: ["active"],
            borderWidth: ["hover", "focus"],
            textColor: [
                "responsive",
                "dark",
                "group-hover",
                "focus-within",
                "hover",
                "focus",
            ],
        },
    },
    plugins: [],
};

Yet the text color does not change on hover. Can someone please help me?

Answer 1

Your issue is that you're attempting to extend Tailwind's base theme and one of your custom colors is called blue. By doing this you have made bg-blue-500 not exist. If you want to extend blue you can add shades as explained here https://tailwindcss.com/docs/customizing-colors#extending-the-defaults but by doing this you have replaced blue instead of extending it.

Once you remove that everything should work and you don't even need to have all those extended variants for textColor in your config.

Here it is working on Tailwind Play https://play.tailwindcss.com/7CUThekLY1?file=config

However, if what you really wanted was to have a class like bg-blue alongside your other bg-blue-[xxx] classes then you need to extend blue and add a key for DEFAULT like this:

...
theme: {
        extend: {
            colors: {
                light: "#e2f3f5",
                teal: "#22d1ee",
                dark: "#0e153a",
                blue: {
                  'DEFAULT': '#f00'
                }
            },
        },
    },
...

Here's an example where I made bg-blue red for demonstration. https://play.tailwindcss.com/VYDBylQOPu