Tailwind CSS - 生产环境优化

Tailwind CSS 以性能为中心，旨在通过仅生成 CSS 来生成尽可能小的 CSS 文件。结合最小化和网络压缩，这通常会导致 CSS 文件即使在大型项目中也小于 10kB。

例如，Netflix 使用 Tailwind 用于 Netflix Top 10，并且整个网站仅通过网络传输 6.5kB 的 CSS。

使用如此小的 CSS 文件，您无需担心像代码拆分每个页面的 CSS 这样的复杂解决方案，而是可以只发布一个小的 CSS 文件，该文件只下载一次并缓存，直到您重新部署站点。

Tailwind CLI

如果您使用 CLI，则只需添加“--minify”标志即可缩减您的 tailwind css 文件。

npx tailwindcss -o build.css --minify

更新 PostCSS 配置

如果您已将 Tailwind 作为 PostCSS 插件安装，请将 cssnano 添加到 **postcss.confog.js** 中插件列表的末尾。

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