为生产环境优化

从 Tailwind CSS 项目中获得最佳性能。

Tailwind CSS 非常注重性能，并旨在通过仅生成实际在项目中使用的CSS来生成尽可能小的CSS文件。

结合压缩和网络压缩，这通常会导致 CSS 文件小于 10kB,即使对于大型项目也是如此。例如，Netflix 在其 “Netflix Top 10” 和整个网站上使用 Tailwind, 整个网站通过网络交付的 CSS 只有 6.5kB。

由于 CSS 文件如此之小，您不必担心像为每个页面拆分 CSS 这样的复杂解决方案，而是只需下载一次并缓存单个小型CSS 文件，直到重新部署您的站点为止。

为了最小化生产构建，我们建议使用 cssnano 等工具压缩您的 CSS,并使用 Brotli 压缩 CSS。

如果您正在使用 Tailwind CLI,则可以通过添加 --minify 标志来压缩您的 CSS:

npx tailwindcss -o build.css --minify

如果您已将 Tailwind 作为 PostCSS 插件安装，请将 cssnano 添加到插件列表的末尾：

  1. module.exports = {
  2.   plugins: {
  3.     tailwindcss: {},
  4.     autoprefixer: {},
  5.     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  6.   }
  7. }

如果您正在使用框架，请查看文档，因为在生产环境中通常会自动处理此问题，您甚至不需要配置它。