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: {} } : {})
  }
}