I create a custom color and class in my global styles:
Code: Select all
:root {
--color-lilac: #E2E3F2;
}
.bg-lilac {
background-color: var(--colour-lilac);
}
Code: Select all
<ul className="list-none py-3 px-6 m-0 md:px-0 md:py-0 border-round shadow-0 md:shadow-2 md:absolute md:border-1 border-50 surface-overlay hidden origin-top w-full md:w-15rem cursor-pointer">
<li>
<a className="p-ripple flex p-3 align-items-center text-purple hover:bg-blue-500 hover:text-white transition-colors transition-duration-150 w-full">
<span className="font-bold">Sub menu item</span>
<Ripple />
</a>
</li>
</ul>
Code: Select all
hover:bg-blue-500
If I use my custom background colour it doesn't work. E.g.
Code: Select all
hover:bg-lilac