幾個月前(在撰寫本文時),Tailwind CSS 開源了其在 Tailwind CSS v4.0 上的工作。 (您可以在 GitHub 上找到它)。
最近,Tailwind 宣布了 Tailwind CSS 4 的公開測試版,在本文中我將介紹新版本的亮點。那麼就讓我們開始吧!
Tailwind 對其引擎進行了重新設計,大大提高了性能。完整建造速度提高了 5 倍,增量建造速度提高了 100 倍(你沒看錯)。
Tailwind v4 也有統一的工具鏈。還記得必須在所有 Tailwind 專案中安裝 autoprefixer 和 postcss 嗎?你不必再這樣了!
Tailwind 採用了一種有趣的設定方法,從 JS 設定檔轉向 CSS 配置。這意味著您將直接在 CSS 中配置外掛程式、主題和其他行為。
Tailwind 也獲得了對 CSS 最新功能的支援。
現在,整體變化已經完成,讓我們看看 Tailwind 具體添加了哪些內容!
如果您想嘗試 Tailwind v4,請查看 v4(測試版)的入門文件。
如果您想輕鬆升級項目,只需執行 npx @tailwindcss/upgrade@next,Tailwind 就會為您完成。 小心! 可能會有重大變化。
Tailwind v4 調色板基於 oklch 而不是 rgb。 RGB 色彩系統在跨螢幕的一致性和活力方面有點限制。由於 oklch 顏色系統現在已得到廣泛支持,Tailwind v4 將利用它!
Tailwind v4 現在預設支援容器查詢。如果你不知道什麼是容器查詢,讓我解釋一下。
您知道 Tailwind 中的 md:、sm: 等功能可以讓您自訂在不同螢幕尺寸上套用的 CSS 嗎?
在這些情況下,類別指的是視窗的大小。透過容器查詢,它們可以改為引用容器的大小。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
以上是Tailwind v 中令人興奮的更新的詳細內容。更多資訊請關注PHP中文網其他相關文章!