skip to content
鰭狀漏斗

不急著升級 Tailwind CSS 到 v4

/ 閱讀時間 3 分鐘

Tailwind CSS v4 在農曆年前出了正式版。雖然看到很多人急著將專案中的 Tailwind CSS v3 升級到 v4,但是我覺得還是再觀望一下比較好。

相較於 Astro v4 到 v5 的改動,Tailwind CSS v3 到 v4 的改動是非常大的,不是只有 class 名稱更改而已,Tailwind CSS 直接從一個 PostCSS Plugin 變成了 Vite Plugin。

Tailwind CSS v4 不再使用 JavaScript 的設定檔(tailwind.config.js),所有設定都要在 CSS 裡面。雖然還能用 @config directive,但是不知道什麼時候會移除:

@config "../../tailwind.config.js";

Tailwind CSS v4 推出也對 plugin 影響很大,但是升級指南中卻完全沒有提到 plugin 要如何升級。不論是 v3 plugin 如何升級到 v4,還是如何在 v4 使用 plugin,升級指南中完全沒有提到。只有在文件中的其中一段有說可以用 @plugin directive 載入 plugin:

@plugin "@tailwindcss/typography";

很明顯官方也想讓同樣是以 JavaScript 寫成的 plugin 退場,改成用單純的 CSS 檔做原來 plugin 做的事情,所以不在文件中有太多關於 plugin 的說明。不過連官方的 @tailwindcss/typography 都沒有改成他們自己建議的單純的 CSS 檔就這樣改,我覺得太急了。

不過 Tailwind CSS v4 也帶來了效能的提升。據官方自己的測試,建置的速度相較於 v3 快了至少 3.5 倍,完整建置的中位數時間從 v3.4 的 378 微秒降低至 v4.0 的 100 微秒。

雖然 Tailwind CSS 在 CSS 檔做所有事情,讓 Tailwind CSS 這個名字名副其實的概念是好的,不過整個生態系似乎還沒有跟上。雖然升級到 Tailwind CSS v4 可以得到效能的提升,但是我覺得還是再等一陣子,等到原有 JavaScript 寫成的 plugin 更新成適合 v4 的樣子,那個時候再來將 Tailwind CSS v3 升級到 v4 比較好。

參考資料