本篇文章將介紹如何利用 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) || []
})
]
}