I have a button variant that is not changing the background opacity on hover.
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
This is the button variant I'm applying. However, it changes color on hover without any problem. For example if i apply
hover:bg-red-500
,it will work without any problem.
It's only when it comes to opacity of the background.
primary: {
DEFAULT: 'var(--primary)',
foreground: 'var(--primary-foreground)',
},
This is in my tailwind.config.mjs.
--primary: oklch(0.8148 0.0819 225.7537);
--primary-foreground: oklch(0.3348 0.0526 161.6917);
is the how the colors are defined. So, I'm using oklch.
bg-primary/180instead ofbg-primary/90? Still nothing changes on hover?