記得一定要搭配上一篇環境配置的前半段!
mkdir tailwind_30day
cd tailwind_30day
code .
^control + ~
,在終端機輸入下面指令來初始化,一路 Enter 按到底就好,會得到一隻 package.json
。npm init
npm install -D tailwindcss@latest
原則上 Tailwind CLI 會自動增加必要的前綴字,不需特地安裝 Postcss 和 Autoprefixer。當然想安裝的話也可以。
「src」
資料夾裡,如 -> src / css / style.css,然後使用 @tailwind
這個指令來載入 Tailwind 的 base、components 和 utilities 樣式:/* src/css/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
上面三行程式碼可以自行取捨,如果不希望使用 base,就把
@tailwind "tailwindcss/base";
這行刪掉就可以了。
package.json
裡,修改 scripts 的資料如下,加入「watch」屬性(可以自定義名稱),記得 -i 為入口,要和剛剛自己創建的 CSS 路徑一樣, -o 為出口,檔名一樣可以自己定義,但通常使用「dist」
作為輸出後的資料夾。後面加入 --watch
是因為威爾豬很懶,不想每次修改就要執行一次,加入 --watch 或是 -w 可以啟動監聽程序,只要 purge 的檔案有更新,會馬上自動重新編譯 CSS。// package.json
...
"scripts": {
"watch": "tailwindcss -i ./src/css/style.css -o ./dist/tailwind.css --watch"
},
...
- 指令:tailwindcss -i 「 來源檔案路徑 」 -o 「 編譯後存到哪個檔案 」。
- 預設支援 Autoprefixer,如果不想要 Autoprefixer 的功能,就在 tailwindcss 後面加上
--no-autoprefixer
。
<!-- index.html -->
<link rel="stylesheet" href="../dist/tailwind.css">
<body class="bg-gray-900"></body>
npm run watch
點擊 VS Code 右下角的 Go Live
(如果沒出現的話,重新開啟一次 VS Code => Mac 快速鍵 ⌘command + ⇧shift + p => 輸入 Reload Window
),噹噹~沒意外的話大家應該看到背景已經變深灰色了吧!
But...休但幾咧,怎麼編譯出整包的 Tailwindcss,檔案大小 4MB,我的媽媽咪啊~沒搞錯吧,說好的壓縮咧?別急,咱們繼續往下走。在終端機打指令 ^control + C
,跳出監聽。
npx tailwindcss init
如果想要 Postcss 插件能隨著 Tailwind 一起使用,可以在指令後面多一個
-p
,會在專案根目錄建立一個基本配置的 postcss.config.js,之後可自行增加需要的 Postcss 插件。
tailwind.config.js
新增配置,並啟用即時模式
。在會寫入 Tailwind 的所有 html、js、vue、jsx 等檔案加入 purge,在 Tailwind 輸出時,將會刪除沒有使用的 CSS。//tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
'./src/**/*.html',
'./src/**/*.js',
...
],
...
}
啟用即時模式
mode: 'jit'
,這是 v2.1 以上版本才有的功能,它會大大縮短編譯時所需要的時間,優點我們之後再談。
未開啟 JIT 模式前:
開啟 JIT 模式後:
這編譯時間簡直神了,短的讓威爾豬感動到想哭,這拯救了多少人虛無飄渺的空白歲月~
現在我們再重複第 7 項指令 npm run watch
。哇嗚~神奇的事發生了,檔案變成只有 11KB (會依據所用的 CSS 多寡而不同),跟原本簡直天壤之別!
但這樣就滿足了嗎?在最後上線前,威爾豬還需要做最後一次優化。在終端機打指令 ^control + C
,跳出監聽。
package.json
,加入「build」屬性(可以自定義名稱),新增 scripts 的資料如下:// package.json
...
"scripts": {
"watch": ... ,
"build": "NODE_ENV=production tailwindcss -i ./src/css/style.css -o ./dist/tailwind.css --minify"
},
...
- 只要在前面加入
NODE_ENV=production
的情況下編譯 CSS,Tailwind 將會自動從你的 CSS 中清除未使用的樣式。--minify
會將編譯的 CSS 全部壓縮成一行。
最後的最後,在終端機輸入指令:
npm run build
噹噹~現在 tailwind.css 被壓縮成一行,檔案大小為 3KB (會依據所用的 CSS 多寡而不同),和最一開始未壓縮前的編譯速度跟檔案大小根本不是同一級別,真香。
歷經波折,環境終於配置完成囉,記得最後上線前,一定要使用 "build" 來最小化,咱們明天見~