TailwindCSS/daisyUI下拉组件激活状态颜色修改失效问题

使用TailwindCSS和daisyUI的CDN版本构建下拉菜单，初始实现代码如下：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a>Item 1</a></li>
    <li class="bg-white"><a>Item 2</a></li>
  </ul>
</div>

存在的问题：下拉菜单项被点击进入active状态时会默认显示紫色，即使给<li>元素添加bg-white工具类也无法覆盖该默认样式。因使用CDN版本无tailwind.config.js修改权限，需要纯CSS方案实现点击态自定义颜色。

daisyUI组件内置的active态样式使用了带组件作用域的选择器，优先级高于直接加在<li>上的Tailwind背景色工具类，因此普通工具类无法覆盖默认紫色样式。

在daisyUI、Tailwind的CDN样式引入之后，添加一段自定义CSS，使用和daisyUI内置规则同权重的选择器，即可覆盖默认激活态样式，不需要修改配置文件，也不需要使用!important强制提权。

/* 可根据需求修改下方颜色值 */
.menu :where(li:not(.menu-title) > *:active),
.menu :where(li:not(.menu-title) > *.active) {
  background-color: #ffffff; /* 激活态背景色，示例为白色 */
  color: #111827; /* 激活态文字颜色 */
}

完整可运行示例：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<!-- 自定义样式必须放在CDN样式引入之后 -->
<style>
.menu :where(li:not(.menu-title) > *:active),
.menu :where(li:not(.menu-title) > *.active) {
  background-color: #ffffff;
  color: #111827;
}
</style>
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a>Item 1</a></li>
    <li class="bg-white"><a>Item 2</a></li>
  </ul>
</div>

• 自定义<style>标签必须放在两个CDN样式链接的后方，否则会被内置样式覆盖，不生效
• 如果需要同时自定义hover、focus态的菜单颜色，只需要在上述CSS选择器中补充对应伪类规则即可
• 该方案仅使用原生CSS覆盖，不依赖Tailwind配置修改，完全适配CDN引入的使用场景

内容的提问来源于stack exchange，提问作者DataScienceNovice