重點整理
- 新增 mauve、olive、mist、taupe 四種中性色，讓網站配色更有層次。
- 原生支援滾動條樣式設定，不用再查瀏覽器相容性。
- Webpack 專屬外掛讓建置速度提升超過 2 倍。
- 新增容器尺寸查詢與 zoom 縮放功能，排版更靈活。
這次更新跟你的網站有什麼關係？
如果你正在使用 Tailwind CSS 來設計網站，這次 v4.2 與 v4.3 的更新帶來許多實用功能，從新的中性色到滾動條樣式，都能讓你的網站看起來更精緻。即使你不是工程師，了解這些更新也能幫助你與設計團隊溝通，做出更符合品牌風格的網站。
新增四種中性色：mauve、olive、mist、taupe
過去 Tailwind 提供的灰色系（gray、zinc、neutral、stone、slate）已經夠用，但這次新增的四種中性色讓設計更有個性：
- mauve：帶點紫調的暖灰
- olive：帶綠調的自然色
- mist：冷調的霧灰色
- taupe：帶棕調的大地色
這些顏色適合用在背景、邊框或文字，讓網站不再只有冷冰冰的灰，而是更有溫度與品牌感。
滾動條樣式終於好設定了
以前要自訂網頁的滾動條樣式，總是要查各瀏覽器的支援狀況，非常麻煩。現在 Tailwind CSS v4.3 直接提供原生工具：
scrollbar-thin、scrollbar-auto、scrollbar-none控制滾動條寬度scrollbar-thumb-*與scrollbar-track-*設定滑桿與軌道顏色scrollbar-gutter-stable避免滾動條出現時版面跳動
這對於有長內容區塊的網站（如文章列表、商品詳情頁）特別實用，能讓整體視覺更一致。
效能提升與更多排版工具
除了視覺上的更新，這次也針對開發效能與排版彈性做了改進：
- Webpack 專屬外掛：讓 Tailwind 在 Next.js 等框架中建置速度提升超過 2 倍
- 邏輯屬性工具：支援不同書寫方向（如直式排版）的間距與定位
- @container-size：讓容器查詢可以根據高度調整，排版更靈活
- zoom-*：直接使用 CSS zoom 屬性，支援所有主流瀏覽器
這些功能讓網站在各種裝置與使用情境下都能有更好的呈現效果。
崴米的建議
- 如果你的網站正在使用 Tailwind CSS，可以考慮升級到 v4.3，享受更豐富的設計工具與效能提升。
- 若想為品牌網站加入更有個性的配色，可以嘗試新增的 mauve、olive 等中性色，讓視覺更有層次。
- 對於有長內容的頁面，善用新的滾動條工具，能提升使用者體驗與整體美感。
#Tailwind CSS#網頁設計#前端開發#網站效能
