Tailwind CSS 理论上只发送你使用的类。但实际上，配置错误的项目发送的 CSS 远超所需，任意值和 @apply 等常见模式会悄悄地使样式表膨胀。以下是将 Tailwind 包控制在 10 KB 以下的方法。

Tailwind JIT 的工作原理

Tailwind v3+ 使用 Just-In-Time 编译器扫描源文件中的类名，只生成这些类需要的 CSS。输出是纯粹、最小化的样式表——没有未使用的类，也没有额外的重置臃肿。

审查 CSS 包大小

生产构建后，检查 .next/static/css/ 中的 CSS 输出。配置良好的 Tailwind 应用：中等复杂度 gzip 10 KB 以下；100 KB 以上是配置问题的红旗。

Tailwind 包过大最常见的原因是 content glob 过于宽泛，意外扫描了 node_modules。只应扫描你的源代码目录。

Tailwind 的任意值语法（w-[337px] 等）为每个值生成唯一的 CSS 规则。有数百个任意值的项目应将它们整合到 tailwind.config.js 的自定义 token 中。

@apply 对全局 CSS 中的组件类很有用。在 JIT 已经处理的组件文件中使用则会造成问题——组件文件已经可以直接访问 Tailwind 类。

避免在 safelist 中使用正则模式——这会生成匹配类的所有变体，往往给包增加 20–100 KB。