Tengo el último nextjs + viento de cola. Aquí está mi configuración de viento de cola:

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

Dentro de la carpeta de components tengo el componente Test.js con contenido:

 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> }

La clase bg-red está presente, pero al pasar el mouse obtengo la clase bg-orange-100 y se elimina del css de resultado, por lo que no hay resultado. ¿Qué podría estar mal?

Así que encontré que el problema está exactamente en hover. Si solo agrego el nombre de la clase de esta manera, funciona bien. No funciona para modificadores como hover, etc.