Next.js+Tailwind在_document设置全局行高不生效问题咨询

问题1：_document.tsx中给body标签加类名设置全局样式是否为Next.js+Tailwind的通用做法？有没有标准配置方案？ #

直接在_document.tsx的<body>标签上挂载Tailwind类名配置全局基础属性是非常常见的合法用法，不存在兼容性或者逻辑问题，业内没有强制统一的唯一标准方案，常用的全局样式配置方式有三种，按需选择即可：

• 直接在_document.tsx的<body>加类名：适合配置少量全局基础属性，比如全局背景色、默认文字颜色、全局字体族，优点是不需要额外写自定义CSS，代码直观没有冗余DOM。你之前用的_app.tsx外层包裹div的方案现在已经不推荐，主要问题是多一层无意义DOM节点，页面高度不足100vh时，外层div的背景没法覆盖整个视口，容易出现底部白边。
• 在全局CSS文件（通常是项目里的globals.css）通过@layer base配置：这是Tailwind官方文档优先推荐的方案，适合需要批量配置多标签默认样式的场景，比如统一标题、段落、表单元素的默认样式，示例代码：

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

@layer base {
  body {
    @apply bg-slate-900 text-white text-lg;
  }
  h1 {
    @apply text-2xl font-bold mb-4;
  }
}

• 通过Tailwind配置文件修改默认设计token：如果要全站统一替换行高、字体、配色这类基础设计值，直接在tailwind.config.js里修改theme配置是最优解，一次修改所有用到对应token的类都会自动生效。

问题2：为什么body上设置的leading-3行高不生效？ #

不是配置方式的问题，是CSS继承规则和Tailwind默认样式共同导致的，核心原因有两个：

1. Tailwind自带的Preflight样式重置，会给div、p、h1-h6、li等常用块级元素设置默认行高，这些子元素自身的行高样式优先级高于从body继承的行高值，所以body上设置的行高不会被子元素沿用。你设置的背景色、文字颜色能生效，是因为Preflight没有给子元素单独设置这两个属性，这两个属性可以正常从body继承。
2. leading-3对应的实际行高值是0.75rem（12px），你同时给body设置了text-lg对应字体大小是18px，行高比字体本身尺寸还小，哪怕生效了视觉上也是文字完全叠在一起，很容易被误判为样式没生效。全站默认行高一般用leading-normal（1.5倍行高）或者leading-relaxed（1.625倍行高）才符合常规阅读习惯。

如果要强制全局统一默认行高，不要只在body上设置，直接在全局CSS的@layer base里给所有元素统一配置即可：

@layer base {
  * {
    @apply leading-normal;
  }
}

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