Next.js全局CSS对markdown解析生成的header不生效被Tailwind覆盖

Tailwind 内置的 Preflight 基础样式重置规则，会默认清除所有原生 HTML 标签的自带样式，包括 h1~h6 标签的字号、加粗效果，目的是统一不同浏览器的默认表现，避免跨端样式差异。你之前写的自定义标题样式优先级低于 Tailwind 注入的默认基础样式，所以被覆盖失效。

方案1：自定义全局基础样式（推荐全局生效场景） #

将你写的标题样式用 @layer base 包裹，Tailwind 会将这部分样式合并到基础样式层，且优先级高于默认的 Preflight 规则，全局所有h1~h4都会生效。修改你的全局CSS如下：

@tailwind base;
/* 自定义基础样式写在@layer base里 */
@layer base {
  h1,h2,h3,h4 {
    font-weight: 700;
    line-height: 1.3333333;
    letter-spacing: -.025em;
    padding: 1em;
  }
  h1 {
    font-size: 1.5em;
  }
  h2 {
    font-size: 1em;
  }
}
@tailwind components;
@tailwind utilities;

方案2：限定样式作用域（推荐仅markdown渲染场景） #

如果不想修改全局标题样式，只需要让渲染出来的markdown内容的标题生效，可以给markdown容器加专属类名，通过后代选择器提高样式优先级，完全避免被全局规则覆盖。
首先修改页面代码中的容器部分：

// 给容器加markdown-content类
<div className="w-2/4 markdown-content">
    <div dangerouslySetInnerHTML={{ __html:props.body}}/> 
</div>

然后在全局CSS中添加对应样式：

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

/* 仅作用于markdown渲染内容内的标题 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    font-weight: 700;
    line-height: 1.3333333;
    letter-spacing: -.025em;
    padding: 1em;
}
.markdown-content h1 {
    font-size: 1.5em;
}
.markdown-content h2 {
    font-size: 1em;
}

方案3：强制优先级（应急使用） #

如果只是临时测试，可以给自定义样式加!important强制提高优先级，不推荐长期使用，会导致后续样式维护困难：

h1 {
    font-size: 1.5em !important;
    font-weight: 700 !important;
}

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