优化生产

从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 添加到插件列表的末尾：

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

如果您正在使用框架，请查阅文档，因为通常在生产环境中会自动处理这一点，您甚至不需要进行配置。