为何Next.js页面加载时，Tailwind会因滚动触发CLS问题？

问题概述 #

在慢网络环境（如Fast 3G）下，Next.js应用加载过程中若用户滚动页面，会触发body元素的累积布局偏移(CLS)，最高分数可达1；但不滚动或网络较快时无此问题。视觉上无明显布局偏移，但移除Tailwind的base或utilities样式后CLS消失，确认问题与Tailwind相关。

复现步骤 #

• 克隆示例仓库并完成本地依赖安装
• 构建项目并启动本地服务器
• 在Chrome浏览器中打开应用，将网络限速设置为Fast 3G
• 刷新页面，加载过程中立即向下滚动
• 使用CLS检测工具验证问题

问题根源分析 #

从提供的布局偏移数据来看，body元素的尺寸发生了关键变化：

• 偏移前：previousRect存在8px左右内边距，宽度为1424px
• 偏移后：currentRect内边距为0，宽度为1440px

这说明body元素的内边距/尺寸在样式加载过程中发生了动态变化，结合Tailwind的加载机制，原因如下：

1. 慢网络下，Tailwind的utilities样式文件加载存在延迟，初始页面先渲染了未应用完整utilities的状态
2. 当utilities样式加载完成后，body的内边距被修正，但此时用户已触发滚动，浏览器重排时检测到布局偏移
3. Chrome的滚动重排机制放大了这种样式延迟导致的尺寸变化，最终触发CLS检测（即使视觉偏移不明显）

解决方案 #

1. 内联核心Tailwind样式 #

在Next.js的_document.js中内联Tailwind的base和utilities核心样式，避免样式加载延迟导致的布局差异。例如：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { getCssText } from '../styles/globals.css' // 根据你的Tailwind配置路径调整

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <style
            id="tailwindcss"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

2. 固定body初始样式 #

在自定义全局样式中强制设置body的内边距、margin和宽度，确保初始渲染与样式加载完成后的布局一致：

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
}

3. 排查滚动相关自定义样式 #

检查Tailwind配置或自定义样式中是否存在scroll-smooth等滚动行为样式，此类样式可能在滚动触发时引发body重排。尝试禁用相关样式，验证是否解决CLS问题。

4. 忽略无视觉影响的CLS（临时方案） #

若确认视觉上无实际偏移，仅为工具检测的尺寸变化，可通过Web Vitals配置忽略body元素的布局偏移，但不推荐作为长期解决方案。

验证 #

修改后重复复现步骤，使用CLS检测工具验证分数是否降至可接受范围（理想值为0）。

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