I have latest nextjs + tailwind. Here is my tailwind config:

module.exports = {
    mode: "jit",
    content: [
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

Inside components folder I have Test.js component with content:

const colors = {
    orange: "bg-orange-100",
    blue: "bg-blue-100",
};

export default function Header() {
    function HeaderButton(props) {
        return <div className={`bg-red hover:${colors[props.color]}`}></div>;
    }
    return <HeaderButton color="orange">Test</HeaderButton>
}

bg-red class is present, but on hover I get class bg-orange-100 and it's purged from result css so no result. What could be wrong?

So I found the problem is exactly in hover. If I just add class name this way it works okay. Doesn't work for modificators like hover etc.