React项目无法识别HTML标签，渲染为普通文本求助

• 检查JSX语法是否正确
  确保你没有把HTML标签当作字符串渲染，这是最常见的错误：
  错误示例：

  // 错误：将h1作为字符串输出
  return "<h1>我的标题</h1>";
  // 错误：用引号包裹标签
  <div>"<h1>我的标题</h1>"</div>
  

  正确写法：

  return <h1>我的标题</h1>;
  

• 验证Tailwind CSS配置与引入
  即使你之前使用Tailwind没问题，也确认以下两点：

  1. tailwind.config.js的content字段包含你的项目文件路径：

     module.exports = {
       content: ["./src/**/*.{js,jsx,ts,tsx}"], // 确保覆盖src下所有组件文件
       // ...其他配置
     }
     

  2. index.css中正确引入Tailwind的基础样式指令：

     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

  Tailwind的base层会保留HTML标签的默认样式（比如h1的字号和加粗），如果这部分没生效，标签会失去默认样式。

• 排查全局样式干扰
  检查index.css中是否存在覆盖标签样式的全局规则，比如：

  * {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
  }
  

  这种全局选择器会强制重置所有元素的样式，包括h1。如果有类似规则，要么删除，要么针对标题标签单独设置样式：

  h1 {
    font-size: 2.5rem;
    font-weight: 700;
  }
  

• 检查组件渲染层级
  确认App组件没有被其他带有强制样式的父组件包裹。比如如果根组件有如下样式：

  function Root() {
    return <div style={{fontSize: "16px", fontWeight: "normal"}}><App /></div>;
  }
  

  子组件的h1会继承这些样式，导致标题效果消失。

• 强制刷新浏览器缓存
  浏览器缓存可能导致旧的CSS文件未更新，按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，或者在开发者工具的Network面板中勾选「禁用缓存」选项后重新加载。

• 查看控制台错误
  打开浏览器开发者工具的Console面板，检查是否有JSX语法错误、样式加载失败等提示。语法错误可能导致组件未正确渲染，进而让标签样式异常。

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