TailwindCSS自定义颜色不生效：导航栏激活态样式无法持久化

问题原因 #

你的代码中，<li>元素的基础类已包含text-white，激活态时又添加了text-accent。由于两个类的CSS优先级相同，默认的text-white样式会覆盖自定义的text-accent，导致DOM类名更新后视觉上无变化。

修复方案 #

移除基础类中的text-white，仅在非激活态时添加该类，确保同一时刻只有一个文本颜色类生效：

<ul className="list-none hidden sm:flex justify-center gap-10">
  {navLinks.map((nav) => (
    <li
      key={nav.id}
      className={`hover:text-accent cursor-pointer text-[18px] font-medium px-4 
      ${active === nav.title ? "text-accent" : "text-white"}`}
    >
      <Link
        to={nav.id}
        smooth={true}
        duration={500}
        offset={-80}
        onClick={() => setActive(nav.title)}
      >
        {nav.title}
      </Link>
    </li>
  ))}
</ul>

额外检查点 #

• 确认nav.title与active的值完全匹配（包括大小写、空格），避免字符串不一致导致状态判断错误。
• 打开浏览器开发者工具的「元素」面板，验证激活态时只有text-accent类存在，无多余的text-white。

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