使用TailwindCSS时Chrome中锚点文本颜色不显示问题

1. 修复HTML语法错误 #

你的代码里<header>标签未正确闭合（最后一行是</header，缺少>），先修正这个问题，避免浏览器渲染异常：

<header className="bg-gray-900">
  <div>
    <a className="text-white">Pricing</a>
    <a className="text-white">Courses</a>
    <a className="text-red-400">Blog</a>
    <a className="text-white">Forum</a>
  </div>
</header>

2. 使用Tailwind内置的强制优先级类 #

Tailwind提供了!前缀来强制样式优先级，比手动加!important更可靠，它会自动处理样式顺序问题。把你的类改成：

<a className="!text-white">Pricing</a>
<a className="!text-red-400">Blog</a>

3. 排查全局样式覆盖 #

打开Chrome开发者工具，查看被覆盖的color样式来源：

• 如果是项目全局CSS（比如a { color: #xxx; }），调整全局样式的优先级，或者给全局锚点样式添加更具体的选择器，避免影响当前区域的标签。
• 如果是第三方样式库的影响，给锚点添加更具体的自定义选择器来覆盖：

  header div a.text-white {
    color: white !important;
  }
  

4. 检查浏览器用户样式表 #

极少数情况是Chrome的用户自定义样式表干扰，在开发者工具样式面板中查看样式来源是否为「user stylesheet」，如果是，关闭Chrome的自定义样式设置即可。

内容的提问来源于stack exchange，提问作者Eben B Gilbert