针对生产进行优化

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

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

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