(Tailwind - DaisyUI) Is there anyways to change hover and active colors of dropdown items?

Question

I use TailwindCSS with DaisyUI (via CDN).

When using DaisyUI Dropdown, is there any way for me to change the color of the dropdown item? This includes the background color of the dropdown itself, then hovering on item (CSS :hover), and clicking on it (CSS :active).

(When Clicking)

So far, I've been able to change the background color of the dropdown itself and when hovering.

<div class="dropdown">
    <div tabindex="0" class="m-1 btn clickables btn-green shadow">
        <p class="text-medium">Testing</p>
    </div>
    <ul tabindex="0" class="p-2 shadow menu dropdown-content bg-white text-black rounded-box w-52 text-sm">
        <li class="rounded hover:bg-gray-300 dropdown-active">
            <a href="page-one.html">Protecting your privacy</a>
        </li>
    </ul>
</div>

I can't seem to get when the list is clicked color (CSS active) with:

.dropdown-active:active {
   background-color: #0B6339 !important; 
}

Reams

Answer 1

You can achieve it by defining custom theme colors for DaisyUI.

Add this block to tailwind.config.js and edit colors regarding to your needs:

daisyui: {
    themes: [
      {
        'mytheme': {
          'primary': '#570df8',
          'primary-focus': '#4506cb',
          'primary-content': '#ffffff',
          'secondary': '#f000b8',
          'secondary-focus': '#bd0091',
          'secondary-content': '#ffffff',
          'accent': '#37cdbe',
          'accent-focus': '#2aa79b',
          'accent-content': '#ffffff',
          'neutral': '#3d4451',
          'neutral-focus': '#2a2e37',
          'neutral-content': '#ffffff',
          'base-100': '#ffffff',
          'base-200': '#f9fafb',
          'base-300': '#d1d5db',
          'base-content': '#1f2937',
          'info': '#2094f3',
          'success': '#009485',
          'warning': '#ff9900',
          'error': '#ff5724',
        },
      },
    ],
  },

Then use color class names just like Tailwind's color names.

<li class="hover:bg-secondary-focus">
  <a>Item 1</a>
</li>

Delisle

This is the optimal answer, however, since my website isn't running on node.js or a server due to assignment requirements. I'm just using CDN (which has no configuration). Is there any way for me to do it without using tailwind.config.js? – Reams

@P.Z. using tailwing.config.js locally will generate your final css than you can deploy everywhere. – Kitkitchen