生产环境优化

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 Top 10 中使用 Tailwind，并且整个网站通过网络传输的 CSS 仅为 6.5kB。

🌐 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.