针对生产环境进行优化

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

结合缩小和网络压缩，即使对于大型项目，这通常也会生成小于 10kB 的 CSS 文件。例如，Netflix 将 Tailwind 用于 Netflix Top 10，整个网站仅通过网络传输 6.5kB 的 CSS。

对于如此小的 CSS 文件，您不必担心复杂的解决方案，例如为每个页面拆分 CSS 代码，而只需发送一个小型 CSS 文件，该文件下载一次并在重新部署网站之前进行缓存。

对于尽可能小的生产版本，我们建议使用 cssnano 等工具缩小 CSS，并使用 Brotli 压缩 CSS。

如果您使用 Tailwind CLI，可以通过添加 --minify 标志来缩小 CSS

npx tailwindcss -o build.css --minify

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

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

如果您使用的是框架，请查看文档，因为这通常会在生产中自动为您处理，您甚至不需要配置它。