乐闻世界logo
6月3日 00:06

TailwindCSS 性能怎么优化？构建速度和产物体积优化实战

TailwindCSS 的性能分两方面：开发时的构建速度和最终 CSS 产物体积。v4 已经解决了构建速度问题（Rust 引擎），产物体积通过 tree-shaking 自动处理。需要手动优化的是避免动态 class 等性能陷阱。

CSS 产物体积：tree-shaking 自动处理

TailwindCSS v3+ 用 JIT 模式——只生成你实际使用的 class，不用的不会出现在 CSS 里。不需要手动 purge（v2 时代的做法）。

检查产物大小：

bash
npx tailwindcss --minify -i input.css -o output.css

典型产物：5-30KB（gzip 后 2-8KB）。如果超过 50KB，说明配置有问题或写了动态 class。

避免动态 class 组合

JIT 模式通过扫描源码中的完整 class 名来做 tree-shaking。动态拼接的 class 无法被检测到：

jsx
// 错误：JIT 无法检测
div className={isPrimary ? 'bg-blue-500' : 'bg-gray-200'}

// 更复杂的情况用 clsx
import clsx from 'clsx';
div className={clsx('px-4 py-2 rounded', {
  'bg-blue-500 text-white': isPrimary,
  'bg-gray-200 text-gray-800': !isPrimary,
})}

关键原则：所有可能的 class 名必须以完整字符串出现在源码里。

@apply 的使用建议

@apply 把 utility class 组合成自定义 class。不会增加产物体积，但会让 CSS 更难维护。建议：只在需要复用复杂组合时用 @apply。

生产构建检查清单

  1. content 配置覆盖了所有模板文件路径
  2. 没有动态拼接 class 名
  3. 用 --minify 压缩 CSS
  4. 启用 gzip/brotli 压缩
  5. 最终 CSS gzip 后小于 10KB 为理想状态
标签：Tailwind CSS