幾個月前（撰寫本文時），Tailwind CSS 開源了其在 Tailwind CSS v4.0 上的工作。 （您可以在 GitHub 上找到它）。

最近，Tailwind 宣布了 Tailwind CSS 4 的公開 beta，在本文中我將介紹新版本的亮點。那麼就讓我們開始吧！

一般結構變化

Tailwind 對其引擎進行了重新設計，大大提高了性能。完整建造速度高達 5 倍，增量建造速度高達 100 倍（您沒看錯）。

Tailwind v4 也有統一的工具鏈。還記得必須在所有 Tailwind 專案中安裝 autoprefixer 和 postcss 嗎？以後再也不用這樣了！

Tailwind 採用了一種有趣的設定方法，從 JS 設定檔轉向 CSS 配置。這意味著您將直接在 CSS 中配置外掛程式、主題和其他行為。

Tailwind 也獲得了對 CSS 最新功能的支援。

CSS 有新標誌（和新功能）！ ？

最佳代碼 ・ 11 月 23 日

#css #webdev #程式設計 ＃討論

現在，整體變化已經完成，讓我們看看 Tailwind 具體添加了哪些內容！

新功能？

如果您想嘗試 Tailwind v4，請查看 v4（測試版）的入門文件。

如果您想輕鬆升級項目，只需運行 npx @tailwindcss/upgrade@next，Tailwind 就會為您完成。 小心！ 可能會有重大變動。

顏色

Tailwind v4 調色板基於 oklch 而不是 rgb。 RGB 色彩系統在跨螢幕的一致性和活力方面有點限制。由於 oklch 顏色系統現在已得到廣泛支持，Tailwind v4 將利用它！

容器查詢

Tailwind v4 現在預設支援容器查詢。如果你不知道什麼是容器查詢，讓我解釋一下。

您知道 Tailwind 中的 md:、sm: 等內容可以讓您自訂在不同螢幕尺寸上套用的 CSS 嗎？
在這些情況下，類別指的是視窗的大小。透過容器查詢，它們可以改為引用容器的大小。

在上面的範例中，網格將有 3 列 - 不是當  視窗  達到小尺寸時，而是當  容器  達到小尺寸時。正如您可以想像的，這在響應式佈局中非常方便。 


  
  
  場地大小


field-sizing 還不是普遍支持的 CSS 功能，但如果它得到支持，那就太棒了！您可以只使用 CSS，而不需要 JS 建立自動調整大小的文字區域。 

並且 Tailwind v4 支持它！ 

在 Tailwind 網站上嘗試示範。 

現在，您只需將 fi​​eld-sizing-content 類別新增至文字區域即可使用它。 

  
  
  後代更新


Tailwind stable（您可能不知道這一點）有一個 * 變體，允許您針對具有類別的元素的 direct 子元素。例如：







Tailwind v4 中的新 ** 變體將針對 所有後代：








  
  
  插入陰影（和環）


現在使用 inset-shadow 和 inset-ring 類別可以輕鬆地在元素上建立插圖陰影和圓環。 












  
  
  還有更多！


如果您想查看所有新增內容，請訪問 https://tailwindcss.com/docs/v4-beta 並查看它們！ 

這篇文章是#discuss 文章！這就是為什麼我保持簡短的原因；我想知道你的想法！ 

我知道你們中很多討厭 Tailwind 的人可能會給我一些回饋？ 

肯定有一些有爭議的新功能，我想得到一些意見？ 

總結：發表評論！ 




感謝您的閱讀！ 

最佳代碼