react-syntax-highlighter 与 TailwindCSS 兼容问题：代码文本颜色不生效

核心原因 #

全局样式（比如Tailwind的preflight、prose类或自定义全局CSS）设置了固定文本颜色或强制继承规则，覆盖了SyntaxHighlighter生成的代码高亮节点颜色。

具体解决方法 #

方法1：强制覆盖全局颜色继承

给SyntaxHighlighter添加自定义类，通过CSS优先级取消颜色继承限制：

// 自定义Code组件
import SyntaxHighlighter from 'react-syntax-highlighter';
import { monokai } from 'react-syntax-highlighter/dist/esm/styles/prism';

const Code = ({ props }) => {
  return (
    <SyntaxHighlighter 
      style={monokai} 
      language={props.node.language}
      className="code-highlighter"
    >
      {props.node.code}
    </SyntaxHighlighter>
  );
};

export default Code;

然后在全局CSS中添加：

.code-highlighter * {
  color: unset !important;
}

方法2：调整Tailwind Typography配置（若使用prose类）

在tailwind.config.js中修改typography插件配置，允许代码块继承高亮主题颜色：

module.exports = {
  plugins: [require('@tailwindcss/typography')],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code, code *': {
              color: 'unset',
              backgroundColor: 'unset',
            },
          },
        },
      },
    },
  },
};

方法3：针对性禁用Tailwind Preflight全局样式

如果是Tailwind的preflight全局重置导致，可在tailwind.config.js中精准调整：

module.exports = {
  corePlugins: {
    preflight: ({ addBase }) => {
      addBase({
        'body': {
          color: '#333', // 你的全局文本颜色
        },
        '.code-highlighter *': {
          color: 'inherit', // 允许代码块继承高亮主题颜色
        },
      });
    },
  },
};

方法4：验证主题导入正确性

确保你导入的是对应库的有效主题，比如：

// 正确导入prism主题
import { vsDark } from 'react-syntax-highlighter/dist/esm/styles/prism';

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