TailwindCSS/daisyUI Dropdown Component Fails To Change Color-CodePudding

I'm working with TailwindCSS and daisyUI to build a dropdown menu. The code is below.

The problem is that when a dropdown menu item is clicked on (when it becomes active), it becomes purple, even though I'm using the utility class bg-white on the <li> element. How can I customize the color of the dropdown menu items on click? I'd really prefer a solution that is CSS-only, as I am using the CDN versions of Tailwind and daisyUI (and therefore have no tailwind.config.js to modify.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div >
  <a >ABOUT</a>
  <ul >
    <li ><a>Item 1</a></li>
    <li ><a>Item 2</a></li>
  </ul>
</div>

CodePudding user response：

I tried adding active:bg-white to the <a> tags that were changing bg color, but DaisyUI overrides it.

Without being able to change the config, what I have done is added the style override in a <style> block.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<style>
.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):active) {
  background-color: white !important;
  color: black;
}
</style>
<div >
  <a >ABOUT</a>
  <ul >
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

CodePudding user response：

I had changed the color to pink-200.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div >
  <a >ABOUT</a>
  <ul >
    <li ><a >Item 1</a></li>
    <li ><a >Item 2</a></li>
  </ul>
</div>