）未生效的解决方案
" />
在使用 tailwind css 的 react 项目中，`
` 等标题标签默认无样式，是因为 tailwind 的 preflight 重置机制移除了原生标题样式；需通过 `class` 手动添加样式或使用 `@apply` 统一定义。
当你在 App.js 中写入类似 <h1>Hello World</h1> 却发现它看起来像普通段落（无加粗、无字号变化、无 margin），这并非 React 渲染错误，而是 Tailwind CSS 的设计行为——它通过内置的 Preflight 功能，对浏览器默认样式进行“归零”处理，包括：
- 移除 <h1>–<h6> 的字体大小、粗细、上下边距等默认样式
- 重置 <p>、<ul>、<button> 等元素的默认样式
✅ 正确做法是：显式声明样式类，而非依赖浏览器默认样式。
✅ 推荐方案一：为单个元素添加 Tailwind 类
// App.js
function App() {
return (
<div className="App">
<h1 className="text-4xl font-bold text-gray-800 mb-4">主标题</h1>
<h2 className="text-2xl font-semibold text-gray-700 mt-2">副标题</h2>
<p className="text-lg text-gray-600">这是一个普通段落。</p>
</div>
);
}
export default App;✅ 推荐方案二：全局恢复标题基础样式（可选）
若希望所有 <h1>–<h6> 默认具备一致的基础样式，可在 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;
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要删除或禁用 Preflight（除非你完全掌控 CSS 重置逻辑），否则可能引发跨浏览器样式不一致；
- @apply 仅在 .css 文件中有效（需确保已启用 Tailwind 的 content 配置并正确扫描 JSX）；
- 若使用 create-react-app + Tailwind，确认已按官方指南完成 集成配置，特别是 postcss.config.js 和 tailwind.config.js 的设置。
? 总结：这不是 bug，而是 Tailwind “实用优先（utility-first）” 设计哲学的体现——样式必须明确、可控、可复用。放弃对原生标签样式的隐式依赖，转而用 class 精准控制，才是现代 CSS 工程化的最佳实践。
