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

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

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

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

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

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

安裝 Tailwind

首先,使用 npm 或 yarn 安裝 Tailwind:

npm init -y
npm install tailwindcss

建立設定檔

接下來,使用以下指令建立設定檔:

npx tailwind init

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

設定 PostCSS

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

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 檔案,並加入以下內容:

@tailwind base;
@tailwind components;
@tailwind utilities;

建立建置指令

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

"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 套件:

npm install watch

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

"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 中的所有註解,使其更小。我們可以自動化這些工作!首先,安裝以下套件:

npm install cssnano
npm install @fullhuman/postcss-purgecss

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

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) || []
    })
  ]
}

在開發時避免過多處理

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

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) || []
    })
  ]
}