Tailwind默认拖慢Lighthouse性能分，因其未裁剪的CSS文件体积过大（常超几百KB），含80%以上未用类，导致渲染阻塞、LCP和CLS评分下降；根本解法是正确配置tailwind.config.ts中的content字段以启用按需提取，并妥善处理动态class名与环境变量。
为什么Tailwind默认会拖慢Lighthouse性能分
Tailwind生成的CSS文件如果没做裁剪，很容易突破几百KB。Lighthouse把“渲染阻塞资源”列为关键指标，styles.css体积过大、未用样式未清除，直接拉低LCP和CLS评分。实测未配置content路径时，开发环境生成的CSS可能含80%以上未使用类名——这些全量样式在首屏就强制下载并解析。
tailwind.config.ts里必须配准的content字段
这是Tailwind按需提取样式的唯一依据，漏配或路径错误=白优化。它不是“建议配置”，而是生产构建的开关。
-
content值必须覆盖所有**实际渲染出HTML的源文件路径**，包括app/、pages/、components/、layouts/等目录下的.js、.ts、.jsx、.tsx、.mdx - 不支持glob通配符嵌套过深（如
./**/*.tsx在某些Node版本下失效），推荐显式列出层级：'./app/**/*.{js,ts,jsx,tsx}' - 若用MDX写博客页，
.mdx后缀必须显式加入，否则其中的className="bg-blue-500"不会被识别 - 动态拼接class名（如
className={`p-${size} text-${color}`}）无法被静态分析，需用safelist兜底
如何安全处理动态class名避免样式丢失
Tailwind的PurgeCSS机制只扫描字面量，遇到模板字符串或变量拼接就会跳过。强行上线会导致按钮突然无背景、文字消失等线上事故。
- 对已知有限取值的变量，用
safelist硬编码：safelist: ['bg-red-500', 'bg-green-500', 'text-sm', 'text-lg'] - 匹配模式更灵活：
safelist: [/^bg-/, /^text-/]，但会略增最终CSS体积，慎用于高频class前缀 - 绝对不要用
!important绕过——这会让PurgeCSS彻底失效，且破坏Tailwind原子化设计初衷 - 检查方式：构建后搜索
dist/css中是否存在你预期的class名；或本地起服务，用浏览器开发者工具查看元素是否应用了对应样式
build后CSS体积异常大？先查TAILWIND_MODE=watch是否残留
开发时为热更新常设环境变量TAILWIND_MODE=watch，但若误带入CI/CD流程，会导致Tailwind跳过Purge步骤，输出全量CSS。
立即学习“前端免费学习笔记（深入）”；
- 确认打包命令不含该变量：
cross-env NODE_ENV=production next build，而非cross-env TAILWIND_MODE=watch NODE_ENV=production next build - 检查
package.json中build脚本是否被手动改写过 - 最简验证法：删掉
.next和out目录，重跑next build，观察终端是否打印Using <code>contentconfiguration提示
