前言

最近Tailwindcss升級到了v4，這次的升級帶來許多的改變，我的個人網站是使用tailwind製作的，這篇文章我會紀錄一下我是如何把v3的專案升級到v4的。

cover 點擊查看完整圖片

V4的改變

現在的tailwindcss不再需要tailwind.config.js，設定檔是透過vite的plugin來設定的，或是使用postcss的plugin來設定。

在過往的版本，我們需要在tailwind.config.js裡面設定需要監聽是否些改的檔案，但是在v4中，tailwindcss會自動偵測需要監聽的檔案，像是從 .gitignore得知哪些檔案不需要監聽，這樣讓我們更方便地去使用tailwindcss，而不需要煩惱哪些檔案需要被查看。

tailwindcss v4 使用rust撰寫的engine Oxide，這個engine可以讓build時間更快。

在過往的版本，雖然有像是 w-16 這樣的class name，但是像w-15這樣的class name是沒有的，只能透過自己去設定，或是使用w-[15rem]這樣的方式，但是在v4中，我們可以直接使用w-15，讓我們更方便地去設定class name。

現在tailwindcss提供了not-hover: 、 not-focus:這樣的東西使用，讓我們可以更方便地去設定class name。

過往的版本，tailwindcss使用的是RGB色彩系統，但是在v4中，改採用OKLSH色彩系統，這部分可以參考這篇文章。

在v4中，*-opacity-*被移除了，現在要使用，搭配顏色使用modifiers，像是bg-black/20，這樣就可以達到背景透明度的效果。

v3 中的shadow-sm 變成了 shadow-xs, rounded-sm 變成了 rounded-xs，rounded 變成了 rounded-sm，改變的不只這些，可以參考這個章節。

官方提供了升級工具，在終端機下

npx @tailwindcss/upgrade@next

就可以升級到v4了，這個工具會幫你把class name改成v4的class name，不過需要注意，一些被deprecated的class name是不會被改的（例如bg-opacity-50），這部分需要自己去改。

我自己除了遇到前面所述的問題，還有遇到另外一個問題，我自己的個人網站，有使用到tailwind-typography，但是在v4中，這個套件在v4中的prose-invert顏色會跑掉，目前我是自己把顏色填進去，這部分希望官方可以盡快修復。