Tailwind v 中令人興奮的更新

幾個月前（在撰寫本文時），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 最新功能的支援。

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 嗎？
在這些情況下，類別指的是視窗的大小。透過容器查詢，它們可以改為引用容器的大小。

<div>



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

<h2>
  
  
  場地大小
</h2>

<p>欄位大小調整還不是普遍支援的 CSS 功能，但一旦實現就會非常棒！您無需使用 JS 來建立自動調整大小的文字區域，只需使用 CSS。 <br>
並且 Tailwind v4 支持它！ </p>

<p>在 Tailwind 網站上嘗試示範。 <br>
現在，您只需將 fi​​eld-sizing-content 類別新增至文字區域即可使用它。 </p>
<h2>
  
  
  後代更新
</h2>

<p>Tailwind stable（您可能不知道這一點）有一個 * 變體，允許您定位具有類別的元素的 <em>direct</em> 子元素。例如：<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Tailwind v4 中的新 ** 變體將針對 <em>所有後代</em>:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h2>
  
  
  插入陰影（和環）
</h2>

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

<pre class="brush:php;toolbar:false">



<p><img src="https://img.php.cn/upload/article/000/000/000/173363689867865.jpg" alt="Exciting updates in Tailwind v�"></p>


<hr>

<h2>
  
  
  還有更多！
</h2>

<p>如果您想查看所有新增內容，請訪問 https://tailwindcss.com/docs/v4-beta 並查看它們！ </p><p>這篇文章是#discuss 文章！這就是為什麼我保持簡短的原因；我想知道你的想法！ <br>
我知道你們中很多討厭 Tailwind 的人可能會給我一些回饋？ <br>
肯定有一些有爭議的新功能，我想得到一些意見？ </p>

<p>總結：發表評論！ </p>


<hr>

<p>感謝您的閱讀！ <br>
最佳程式碼</p>