Tailwind text-red-900在Brave浏览器颜色渲染异常问题排查

一、--darkreader-inline-color的来源 #

这个内联样式是Dark Reader工具注入的：

• 要么是出现问题的Brave浏览器安装了Dark Reader扩展；
• 要么是Brave内置的「深色模式增强」功能（网页深色化处理工具）被开启了。
  两台设备仅一台出现问题，说明该设备的Brave单独开启了上述某一项功能，另一台没有。

二、阻止该样式生效的方法 #

• 检查并禁用Dark Reader扩展
  打开Brave的扩展管理页面（地址栏输入brave://extensions/），找到Dark Reader扩展，点击「禁用」或「移除」即可。
• 关闭Brave内置的深色模式增强功能
  1. 打开Brave设置页面（地址栏输入brave://settings/）；
  2. 进入「外观」选项，将「深色模式」设置为「跟随系统」，同时关闭「增强深色模式」相关开关；
  3. 或者点击地址栏左侧的Shields图标，找到「深色模式」选项，设置为「禁用」。
• 针对单个网站禁用深色化处理
  如果是使用Dark Reader扩展，点击扩展图标，在当前网站的设置中选择「禁用Dark Reader」；如果是Brave内置功能，在Shields面板中单独关闭当前网站的深色模式。
• 代码层面应急修复（不推荐长期使用）
  若不想修改浏览器设置，可以通过提高样式优先级覆盖注入的样式：

  .text-red-900 {
      color: #7f1d1d !important; /* Tailwind text-red-900的默认深色模式颜色 */
  }
  

  或者在Tailwind配置文件中重新定义颜色，确保自定义颜色的优先级：

  module.exports = {
    theme: {
      extend: {
        colors: {
          red: {
            900: '#7f1d1d',
          },
        },
      },
    },
  }
  

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