）未生效的解决方案 ">）未生效的解决方案 " />

在使用 tailwind css 的 react 项目中，`

` 等标题标签默认无样式，是因为 tailwind 的 preflight 重置机制移除了原生标题样式；需通过 `class` 手动添加样式或使用 `@apply` 统一定义。

当你在 App.js 中写入类似

Hello World

却发现它看起来像普通段落（无加粗、无字号变化、无 margin），这并非 React 渲染错误，而是 Tailwind CSS 的设计行为——它通过内置的 Preflight 功能，对浏览器默认样式进行“归零”处理，包括：

• 移除

  –

  的字体大小、粗细、上下边距等默认样式

• 重置

  、

  、 等元素的默认样式

✅ 正确做法是：显式声明样式类，而非依赖浏览器默认样式。

✅ 推荐方案一：为单个元素添加 Tailwind 类

// App.js
function App() {
  return (
    
      
主标题
      
副标题
      
这是一个普通段落。
    
  );
}
export default App;

✅ 推荐方案二：全局恢复标题基础样式（可选）

若希望所有

–

默认具备一致的基础样式，可在 src/index.css（或 src/App.css）中使用 @layer base 和 @apply：

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-4xl font-bold leading-tight;
  }
  h2 {
    @apply text-3xl font-semibold leading-snug;
  }
  h3 {
    @apply text-2xl font-medium;
  }
}

⚠️ 注意事项：

• 不要删除或禁用 Pr

  

  eflight（除非你完全掌控 CSS 重置逻辑），否则可能引发跨浏览器样式不一致；
• @apply 仅在 .css 文件中有效（需确保已启用 Tailwind 的 content 配置并正确扫描 JSX）；
• 若使用 create-react-app + Tailwind，确认已按官方指南完成 集成配置，特别是 postcss.config.js 和 tailwind.config.js 的设置。

? 总结：这不是 bug，而是 Tailwind “实用优先（utility-first）” 设计哲学的体现——样式必须明确、可控、可复用。放弃对原生标签样式的隐式依赖，转而用 class 精准控制，才是现代 CSS 工程化的最佳实践。