iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

初見 Tailwindcss系列 第 3

Day 3 - 試試 Tailwind CLI

  • 分享至 

  • xImage
  •  

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

使用 Tailwind CLI 安裝

  1. 先建立一個資料夾(名稱可自訂),並用 VS Code 開啟。
mkdir tailwind_30day
cd tailwind_30day
code .
  1. 開啟 VS Code 的終端機,Mac 快速鍵為 ^control + ~,在終端機輸入下面指令來初始化,一路 Enter 按到底就好,會得到一隻 package.json
npm init
  1. 安裝最新版 Tailwind,在終端機輸入下列指令:
npm install -D tailwindcss@latest

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

  1. 建置自己的 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"; 這行刪掉就可以了。

  1. 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
  1. 在「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>
  1. 在終端機輸入 "watch" 指令看看 Tailwind 有沒有引入成功。
npm run watch

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

https://ithelp.ithome.com.tw/upload/images/20210903/20141250tr9HwMH0Ts.png

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

https://ithelp.ithome.com.tw/upload/images/20210902/20141250R9JmzQmf7O.png

優化

  1. 創建 tailwind.config.js:
npx tailwindcss init

如果想要 Postcss 插件能隨著 Tailwind 一起使用,可以在指令後面多一個 -p,會在專案根目錄建立一個基本配置的 postcss.config.js,之後可自行增加需要的 Postcss 插件。

  1. 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 模式前:
https://ithelp.ithome.com.tw/upload/images/20210902/20141250SeJmz48iJl.png

開啟 JIT 模式後:
https://ithelp.ithome.com.tw/upload/images/20210902/20141250K4jtD0PrGH.png

這編譯時間簡直神了,短的讓威爾豬感動到想哭,這拯救了多少人虛無飄渺的空白歲月~

現在我們再重複第 7 項指令 npm run watch。哇嗚~神奇的事發生了,檔案變成只有 11KB (會依據所用的 CSS 多寡而不同),跟原本簡直天壤之別!

https://ithelp.ithome.com.tw/upload/images/20210902/20141250Q5NmMDunz7.png

但這樣就滿足了嗎?在最後上線前,威爾豬還需要做最後一次優化。在終端機打指令 ^control + C,跳出監聽。

  1. 回到 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

https://ithelp.ithome.com.tw/upload/images/20210902/20141250ARqJWp7x6a.png

噹噹~現在 tailwind.css 被壓縮成一行,檔案大小為 3KB (會依據所用的 CSS 多寡而不同),和最一開始未壓縮前的編譯速度跟檔案大小根本不是同一級別,真香。

歷經波折,環境終於配置完成囉,記得最後上線前,一定要使用 "build" 來最小化,咱們明天見~


上一篇
Day 2 - 環境配置
下一篇
Day 4 - Just In Time (JIT) 即時模式
系列文
初見 Tailwindcss30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言