/

如何使用 PurgeCSS 和 PostCSS 設置 Tailwind

如何使用 PurgeCSS 和 PostCSS 設置 Tailwind

本篇文章將介紹如何利用 PurgeCSS 和簡單的 PostCSS 設置來修剪 Tailwind CSS（不涉及使用 webpack）。

最近，我決定將我的部落格 CSS 遷移到 Tailwind。

Tailwind 是一個有趣的框架，它不像 Bootstrap 或其他框架提供一組小部件，而是提供「工具程式」。

我發現 Tailwind 與我處理 HTML 的方式非常契合。

之前我在另一篇文章中介紹了如何使用 Vue 和 Tailwind，但如果沒有使用開發工具，正確設置起來可能會有些困難。因此，我決定寫這篇文章，以便日後自己回顧，也希望對其他人有所幫助 🙃

這篇文章將介紹如何在任何專案中使用 Tailwind。

安裝 Tailwind

首先，使用 npm 或 yarn 安裝 Tailwind：

1
2
npm init -y
npm install tailwindcss

建立設定檔

接下來，使用以下指令建立設定檔：

1
npx tailwind init

這會在專案根目錄中建立一個 tailwind.config.js 檔案，其中包含基本的 Tailwind 設定。

設定 PostCSS

現在，需要微調 PostCSS 的配置，以確保 Tailwind 正常運行。在 postcss.config.js 中加入以下內容：

1
2
3
4
5
6
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

若尚未存在 postcss.config.js，請建立一個。

為了方便起見，我也加入了 autoprefixer，你可能會用到它。使用 npm install autoprefixer 安裝它。

另外，請確保已經安裝了 PostCSS (npm install -g postcss-cli)。

建立 Tailwind CSS 檔案

現在，在任何你想要的地方（例如 tailwind.css）建立一個 CSS 檔案，並加入以下內容：

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

建立建置指令

現在，打開你的 package.json 檔案，如果尚未存在 scripts 區塊，請新增它：

1
2
3
"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

建置 Tailwind

現在，從命令列執行 npm run build:css，將會建置出最終的 CSS 檔案。

生成的檔案位於 static/dist/tailwind.css（你可以在上面的指令中更改位置）。

檔案變更時自動重新生成 CSS

每次我在主題的 HTML 中進行更改（在我的情況下，它們存放在 layouts 資料夾中），我都希望重新生成 CSS，並觸發我所設定的修剪和壓縮。

該如何實現這一點呢？

首先，安裝 watch npm 套件：

1
npm install watch

接著，在 package.json 檔案中新增 watch 腳本。你之前已經有 build:css，這裡我們只需新增一個腳本來監聽 layouts 資料夾並在每次變更時執行 build:css：

1
2
3
4
"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

現在執行 npm run watch，你應該已經完成了！

修剪檔案大小

如果你檢查一下，生成的檔案會非常大。即使在 HTML 中沒有使用任何 Tailwind 的類別，默認情況下仍會將整個框架包括進去，這是因為在 tailwind.js 檔案中的默認配置如此。

他們決定包括所有的類別，以避免讓使用者遺漏某些東西。現在，我們需要刪去一些東西，而工具 PurgeCSS 可以用於刪除所有未使用的 CSS 類別。

我也想要刪除 CSS 中的所有註解，使其更小。我們可以自動化這些工作！首先，安裝以下套件：

1
2
npm install cssnano
npm install @fullhuman/postcss-purgecss

然後，在我們的 PostCSS 設定檔 postcss.config.js 中加入以下內容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

在開發時避免過多處理

為什麼要這麼做呢？每增加一個步驟都會減緩開發時的反饋周期。我使用這個設定只在生產環境中加入前綴並刪除註解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null,
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}