如何修改NG-Zorro（Angular版Ant Design）深色主题导航栏颜色？

1. 纠正Tailwind主题配置文件 #

Tailwind的主题定制不需要修改theme.less，核心配置文件是项目根目录下的tailwind.config.js，如果项目里没有这个文件，直接手动创建即可。

2. 自定义导航栏颜色变量 #

在tailwind.config.js中扩展主题颜色，添加导航栏的默认和hover状态颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue,jsx}"], // 根据你的项目类型调整路径
  theme: {
    extend: {
      colors: {
        navbar: {
          base: '#你的默认背景色',
          hover: '#你的hover状态色'
        }
      }
    },
  },
  plugins: [],
}

3. 给导航栏元素绑定样式类 #

直接给导航栏标签和内部链接添加对应Tailwind类：

<nav class="bg-navbar-base">
  <a href="#" class="hover:bg-navbar-hover px-4 py-2">首页</a>
  <a href="#" class="hover:bg-navbar-hover px-4 py-2">分类</a>
</nav>

4. 排查仅hover生效的问题 #

• 你之前修改的theme.less大概率是其他UI框架（如Ant Design）的主题文件，和Tailwind的配置体系不兼容，建议停止修改该文件
• 用浏览器开发者工具（F12）查看导航栏元素的样式规则，检查默认背景色是否被其他优先级更高的样式覆盖，若有可添加!important临时测试（不推荐长期使用），或调整类的顺序

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