如何使用PurgeCSS和PostCSS設置Tailwind

如何設置工作流程以使用PurgeCSS和簡單的PostCSS設置修剪Tailwind CSS(不涉及Webpack)

我最近著手將博客CSS移至尾風

Tailwind是一個有趣的框架,因為它沒有提供一組Bootstrap或其他小部件,而是提供了公用事業

我發現它與HTML的使用方式產生了很大的共鳴。

我介紹了我的用法Vue的尾風在上一篇文章中,但是還沒有合適的構建工具,可能很難正確設置正確的位置,我決定寫這篇博客文章,甚至只是為了讓我以後記得

在這篇文章中,我解釋瞭如何將Tailwind與任何一種項目。

安裝Tailwind

第一步是使用npm或yarn安裝Tailwind:

npm init -y
npm install tailwindcss

創建配置文件

接下來,使用此命令來創建配置文件:

npx tailwind init

這將創建一個tailwind.config.js項目根目錄中的文件,添加基本的Tailwind配置。

配置PostCSS

現在您需要調整的CSS配置以確保Tailwind運行。添加:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

給你postcss.config.js。如果不存在,請創建一個。

為了方便起見,我還添加了autoprefixer,您可能會需要它。用安裝npm install autoprefixer

哦,還要確保您安裝了PostCSS(npm install -g postcss-cli

創建Tailwind CSS文件

現在,在所需的位置創建一個CSS文件,例如tailwind.css並添加

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

創建構建命令

現在打開你的package.json文件,如果沒有,請添加一個腳本部分:

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

建立尾風

現在從命令行運行npm run build:css將構建最終的CSS文件。

結果文件在static/dist/tailwind.css(您可以在上面的命令中更改位置)。

更改文件後自動重新生成CSS

每次我更改主題HTML(存儲在layouts文件夾),我想重新生成CSS,並觸發我設置的清除和縮小。

這該怎麼做?

安裝watchnpm軟件包:

npm install watch

並添加watch腳本給你package.json文件。你已經有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中刪除所有註釋,並使其盡可能小。csnano是我們要尋找的。

我們可以自動化這些東西!首先,安裝這些實用程序:

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

在開發中,避免過多的處理

為什麼?您添加的每個步驟都會減慢開發過程中的反饋週期。我使用此配置僅在生產中添加前綴並刪除註釋:

postcss.config.js

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

免費下載我的CSS手冊


更多CSS教程: