Tailwind CSS 的 LCP 和 CLS 问题源于未启用按需提取：content 字段必须全覆盖（如 ./app//.{js,ts,jsx,tsx}、./src/components//.{js,ts,jsx,tsx}、./src/*/.mdx），JIT 仅静态扫描字面量类名，动态拼接类需改用 @apply 或 CSS 变量；生产构建须带 --minify 且设 TAILWIND_MODE=build；验证需 grep 检查冗余类是否真实消失。
Tailwind CSS 默认会严重拖低 Lighthouse 的 LCP 和 CLS 分数，核心问题不是框架本身，而是未正确启用按需提取——你看到的几百KB甚至2MB+的 styles.css，90%以上类名根本没在首屏渲染中出现过。
tailwind.config.ts 中的 content 字段必须全覆盖且精确
这是整个优化链条里唯一不可妥协的环节。JIT 模式不会“猜”你用了哪些类，它只扫描 content 列出的路径下所有含 className 的文件，并提取字面量匹配的类名。
- Next.js App Router 项目必须同时包含：
./app/**/*.{js,ts,jsx,tsx}和./src/components/**/*.{js,ts,jsx,tsx}；漏掉app/下的 layout.tsx 或 loading.tsx，dark:、group-hover:这类上下文类大概率消失 - 如果用了 MDX（如 HyperUI 的
.mdx组件），要显式加上：./src/**/*.mdx；否则所有 MDX 里写的text-blue-500全被当“死代码”干掉 - 动态类名如
className={`text-${color}-500`}不会被扫描到，也不能靠safelist硬加——它会导致全量颜色类回流；应改用@apply封装成确定类名，或用 CSS 变量 +style控制
构建命令必须走生产模式，且带 --minify
开发时 npm run dev 看不到体积问题，是因为 JIT 在内存中实时生成样式，不依赖 content 扫描结果；真正裁剪只发生在生产构建阶段。
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css→ 缺少--minify且未设环境变量，purge逻辑完全不触发 - 正确写法（推荐）：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - Next.js 用户请确认
next build调用的是 Tailwind v4+ 的 PostCSS 插件（@tailwindcss/postcss），而不是旧版 CLI；否则即使配置了content，插件层也不会执行裁剪
验证裁剪是否真生效，别信文件大小数字
文件体积缩小 ≠ 实际剔除有效。很多构建流程压缩了空白和注释，但冗余类还在。得看类名是否真的被删了。
- 在任意一个被
content覆盖的 .tsx 文件里加一行：className="bg-hotpink text-9xl"（bg-hotpink是 Tailwind 默认不提供的颜色，text-9xl是非法尺寸） - 运行生产构建后执行：
grep -c "bg-hotpink" ./dist/output.css，返回0才说明 JIT 扫描已工作；若返回非零，说明content路径漏了、或构建没走生产流程 - 再查高频类：
grep -o "text-lg" ./dist/output.css | wc -l，对比源码中实际使用次数；如果从 150+ 降到个位数，说明裁剪深度足够
最常被忽略的一点：Tailwind 的裁剪是静态字符串匹配，它不运行 JS，也不解析模板语法。所以任何通过变量拼接、clsx 动态组合、或第三方组件库内部硬编码的 class 名，只要没以字面量形式出现在 content 扫描路径内，就一定会被删——这不是 bug，是设计前提。应对方式不是加 safelist，而是把动态逻辑收口到 CSS 自定义属性或 @layer 封装里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
