生产环境优化

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

¥Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

结合缩小和网络压缩，这通常会导致 CSS 文件小于 10kB，即使对于大型项目也是如此。例如，Netflix 为 Netflix 前 10 名 使用 Tailwind，整个网站仅通过网络传递 6.5kB 的 CSS。

¥Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.

有了这么小的 CSS 文件，你不必担心复杂的解决方案，例如为每个页面拆分 CSS 代码，而是可以只发送一个小的 CSS 文件，下载一次并缓存，直到你重新部署你的站点。

¥With CSS files this small, you don’t have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file that’s downloaded once and cached until you redeploy your site.

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

¥For the smallest possible production build, we recommend minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli.

如果你使用的是 Tailwind CLI，则可以通过添加 --minify 标志来缩小 CSS：

¥If you’re using Tailwind CLI, you can minify your CSS by adding the --minify flag:

npx tailwindcss -o build.css --minify

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

¥If you’ve installed Tailwind as a PostCSS plugin, add cssnano to the end of your plugin list:

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

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

¥If you’re using a framework, check the documentation as this is often handled for you in production automatically and you don’t even need to configure it.