Day 3 - 試試 Tailwind CLI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

自我挑戰組

初見 Tailwindcss系列第 3 篇

Day 3 - 試試 Tailwind CLI

13th鐵人賽

威爾豬

2021-09-03 15:31:15

2386 瀏覽

分享至

記得一定要搭配上一篇環境配置的前半段！

使用 Tailwind CLI 安裝

先建立一個資料夾(名稱可自訂)，並用 VS Code 開啟。

mkdir tailwind_30day
cd tailwind_30day
code .

開啟 VS Code 的終端機，Mac 快速鍵為 ^control + ~，在終端機輸入下面指令來初始化，一路 Enter 按到底就好，會得到一隻 package.json。

npm init

安裝最新版 Tailwind，在終端機輸入下列指令：

npm install -D tailwindcss@latest

原則上 Tailwind CLI 會自動增加必要的前綴字，不需特地安裝 Postcss 和 Autoprefixer。當然想安裝的話也可以。

建置自己的 CSS 檔，這樣未來如果有編寫到 CSS 的部分，會比較好維護，檔名可以取自己想取的名稱。威爾豬這邊習慣將資料放入「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。

在「src」創建 index.html，因為設定輸出為 dist / tailwind.css，所以要注意路徑，連結「dist」資料夾這邊的 CSS 才正確，並在 body 標籤寫入一個 Tailwind 內建的 Class 背景色(這邊之後會提到)。

<!-- index.html -->

<link rel="stylesheet" href="../dist/tailwind.css">

<body class="bg-gray-900"></body>

在終端機輸入 "watch" 指令看看 Tailwind 有沒有引入成功。

npm run watch

點擊 VS Code 右下角的 Go Live (如果沒出現的話，重新開啟一次 VS Code => Mac 快速鍵 ⌘command + ⇧shift + p => 輸入 Reload Window)，噹噹～沒意外的話大家應該看到背景已經變深灰色了吧！

But...休但幾咧，怎麼編譯出整包的 Tailwindcss，檔案大小 4MB，我的媽媽咪啊～沒搞錯吧，說好的壓縮咧？別急，咱們繼續往下走。在終端機打指令 ^control + C ，跳出監聽。

優化

創建 tailwind.config.js：

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"
  },
...