iT邦幫忙

0

快速了解 Tailwind CSS 的 JIT 模式

線上範例:JIT 線上範例 - Tailwind Play

因為 Tailwind CSS 的設計原理,在開發時會先幫你產生好超多的 class,CSS 檔最少 3 MB 起跳,而且預設還只有開 1-2個 Variants。但現實往往沒有那麼單純,開發下去需要的 Variants 只會越來越多,開發中產生的 CSS 檔長到 10-20 MB 都是可能的,還會連帶拖慢 Chrome 載入的時間。

這時候 JIT 模式就派上用場啦!Tailwind CSS 2.0 正式上線的 Just-in-Time (簡稱 JIT) 編譯器,可以在寫 HTML 時及時編譯 CSS,大幅縮短編譯時間,和縮小產生的資產大小。

Just-in-Time 模式的新功能

廢話不說,馬上來看它可以做什麼:

  • 超快速的編譯時間。原本 Tailwind CLI 編譯需要 3-8 秒,在 JIT 模式 下僅需 0.8 秒
  • 直接使用任意 Variants。不用再煩惱需不需要開 activefocusdisabled 等。
  • 任意值 CSS class。可以直接在 HTML 裡寫像 top-[247px] 這樣的 class,將會自動生成。而且也可以使用 Variants:lg:top-[587px]
  • 在 develop 和 production 產生一樣的 CSS。不需要煩惱上線後會不會有 class 靈異的消失~
  • 在開發時有更好的瀏覽器效能。因為 develop 和 production 的 CSS 大小一樣小,本地預覽時不會出現 10-20 MB 的 CSS 檔案,開啟相關開發工具也不會載入很久。

啟用 JIT 模式

要開啟非常簡單,只需要在 tailwind.config.js 裡把 mode 設成 'jit' 就行了:

module.exports = {
  mode: 'jit',
  theme: {
    // ...
  }
  // ...
}

但因為 JIT 模式在開發時就只會打包需要的 class,所以也要配置 purge 的部分:

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    // ...
  }
  // ...
}

新功能

然後就可以開始玩功能了!

直接使用任意 Variants

<input class="active:bg-indigo-200">

直接在 HTML 寫就可以了,不用在 tailwind.config.js 做設定,方便許多了。其他的 focus-visibledisabledeven 等都可以用喔!

當然,還支援各種疊加的用法,像這樣 XD:

<button class="md:dark:disabled:focus:hover:bg-gray-300">

任意值 class

如果網站是照著設計稿刻出來的,這個功能絕對是必備。使用任意值 class 很簡單,把你想要指定的值用 [...] 框起來,比如 h-[100px] 可以設定高度為 100px。但要注意的是不能濫用,否則 Tailwind CSS 的設計系統就失去了原本的優勢了。

首先是萬惡的圖片,絕對定位+圖片寬高,現在終於都可以在 HTML 裡搞定!:

<img class="absolute w-[165px] h-[110px] top-[-125px] left-[62px] md:top-[-30px] md:left-[180px]" src="/background-image.png">

如果有嵌入 LINE 或 Twitter 的按鈕時,LINE/Twitter 的商標顏色也不用增加到顏色系統了,因為只會用這麼一次呀:

<button class="bg-[#00b900]">加入 LINE 好友</button>

或者是更客製的網格設定:

<div class="grid-cols-[1fr,700px,2fr]">
  <!-- ... -->
</div>

!important 修飾符

還有 !important 也可以使用,在特殊狀況時會用到:

<div class="!font-bold">!IMPORTANT BOLD TITLE</div>

如果加上 Variants 時,! 要跟著樣式名字,而不是加在最前面:

<div class="sm:hover:!font-bold">

JIT 模式的限制

當然 JIT 模式不是萬能的,它也有一些使用上的限制,請往下看...

需要記住一件事情,Tailwind CSS 是靜態提取 class 的,寫 class 務必要寫完整,不然 Tailwind CSS 會無法正確的打包 CSS。

X 這樣是不行的呦:

<div :class="`mt-[${size === 'lg' ? '22px' : '17px' }]`"></div>

O 動態選擇完整的 class:

<div :class="size === 'lg' ? 'mt-[22px]' : 'mt-[17px]'"></div>

但如果真的要寫完全動態的 class 的話,只能改用 Inline-style 或 CSS-in-JS 的套件了。

X 這樣是不行的呦:

<div :class="`bg-[${userThemeColor}]`"></div>

O 改用 Inline-style

<div :style="`background-color: ${userThemeColor}`"></div>

還有,JIT 模式是沒有使用 PurgeCSS,所以 PurgeCSS 的設定都不能用,如果出於特殊狀況需要用 safelist 的話,可以增加一個 safelist.txt 達成這個目的。

結語

結論,JIT 模式太香了!速度快不說,還有這麼多新功能,推薦新專案都要啟用,真的爽到起飛!!!

線上體驗

啊!別忘了來用用看 Tailwind Play,可以在本篇的範例體驗看看唷:JIT 線上範例 - Tailwind Play

參考資料


尚未有邦友留言

立即登入留言