I am currently using the latest versions of Next.js and Tailwind CSS. Below is my Tailwind config:
module.exports = {
mode: "jit",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
Within the components folder, I have a component named Test.js which contains the following code:
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>
}
The issue I am facing is that although the bg-red class is present, when it is hovered over, the class bg-orange-100 is applied but is not reflected in the final CSS output. What could be causing this?
Upon further investigation, I have discovered that the problem lies specifically with the hover functionality. Adding regular class names works fine, but modifiers like hover do not work as expected.