Tailwind v 中令人興奮的更新

首頁 > 程式設計 > Tailwind v 中令人興奮的更新

Tailwind v 中令人興奮的更新

發佈於2024-12-22

幾個月前（撰寫本文時），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 將利用它！

Exciting updates in Tailwind v�

容器查詢

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

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





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


  
  
  場地大小


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

並且 Tailwind v4 支持它！ 

在 Tailwind 網站上嘗試示範。 

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

  
  
  後代更新


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







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








  
  
  插入陰影（和環）


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












  
  
  還有更多！


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

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

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

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

總結：發表評論！ 




感謝您的閱讀！ 

最佳代碼

版本聲明本文轉載於：https://dev.to/best_codes/exciting-updates-in-tailwind-version-4-40i0?1如有侵犯，請聯絡[email protected]刪除

最新教學更多>

C#流程執行優化技巧大揭秘
[2 在C＃中運行高架進程：實用指南概述許多C＃應用程序需要啟動需要管理權限的流程。本指南探討了實現這一目標的有效方法。方法1：使用“ runas”動詞（vista的理想和以後）對於Vista和更新的操作系統，“ Runas”動詞提供了一個簡單的解決方案： //檢查操作系統版本 if（sy...

程式設計發佈於2025-05-01
如何在其容器中為DIV創建平滑的左右CSS動畫？
通用CSS動畫，用於左右運動，我們將探索創建一個通用的CSS動畫，以向左和右移動DIV，從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div，無論其未知長度如何。問題：使用左直接導致瞬時消失更加流暢的解決方案：混合轉換和左 [並實現平穩的，線性的運動，我們介紹了線性的轉換。...

程式設計發佈於2025-05-01
在C#中如何獲取正在運行的進程的完整執行路徑？
[2 [2 在管理交互過程並修改其配置時，了解每個過程的完整執行路徑至關重要。此路徑對於清潔終止和重新啟動更改的過程至關重要。簡單地殺死沒有這些信息的過程就可以很難找到並以後重新啟動。使用System.diagegnostics 的簡單解決方案幸運的是，使用 system.diagno...

程式設計發佈於2025-05-01
如何使用PHP從XML文件中有效地檢索屬性值？
從php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...

程式設計發佈於2025-05-01
Async Void vs. Async Task在ASP.NET中：為什麼Async Void方法有時會拋出異常？
在ASP.NET async void void async void void void void void的設計無需返回asynchroncon而無需返回任務對象。他們在執行過程中增加未償還操作的計數，並在完成後減少。在某些情況下，這種行為可能是有益的，例如未期望或明確預期操作結果的火災和...

程式設計發佈於2025-05-01
您如何在Laravel Blade模板中定義變量？
在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時，它可能並不總是最優雅的解決方案。幸運的是，Blade通過@php Directive提供了更優雅的方法： $ old_section =...

程式設計發佈於2025-05-01
如何從PHP中的Unicode字符串中有效地產生對URL友好的sl。
為有效的slug生成首先，該函數用指定的分隔符替換所有非字母或數字字符。此步驟可確保slug遵守URL慣例。隨後，它採用ICONV函數將文本簡化為us-ascii兼容格式，從而允許更廣泛的字符集合兼容性。接下來，該函數使用正則表達式刪除了不需要的字符，例如特殊字符和空格。此步驟可確保slug僅包...

程式設計發佈於2025-05-01
Java中Lambda表達式為何需要“final”或“有效final”變量？
Lambda Expressions Require "Final" or "Effectively Final" VariablesThe error message "Variable used in lambda expression shou...

程式設計發佈於2025-05-01
左連接為何在右表WHERE子句過濾時像內連接？
左JOIN CONUNDRUM：WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣，當將c.foobar條件放置在上面的Where子句中時，據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時，才會返回結果。為什麼要變形？關鍵在於其中的子句。當左聯接的右側...

程式設計發佈於2025-05-01
為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤？
查詢模式實現缺失：解決“無法找到”錯誤在銀光應用程序中，嘗試使用LINQ建立錯誤的數據庫連接的嘗試，無法找到以查詢模式的實現。 ”當省略LINQ名稱空間或查詢類型缺少IEnumerable 實現時，通常會發生此錯誤。解決問題來驗證該類型的質量是至關重要的。在此特定實例中，tblpersoon可能...

程式設計發佈於2025-05-01
如何從Python中的字符串中刪除表情符號：固定常見錯誤的初學者指南？
從python import codecs import codecs import codecs 導入 text = codecs.decode（'這狗\ u0001f602'.encode（'utf-8'），'utf-8'）印刷（文字）＃帶有...

程式設計發佈於2025-05-01
切換到MySQLi後CodeIgniter連接MySQL數據庫失敗原因
Unable to Connect to MySQL Database: Troubleshooting Error MessageWhen attempting to switch from the MySQL driver to the MySQLi driver in CodeIgniter,...

程式設計發佈於2025-05-01
JDBC中關閉連接是否足夠？是否需顯式關閉結果集和語句？
jdbc資源封閉練習需要：在JDBC編程的領域中，需要顯式結果集和語句關閉顯式關閉的基本原理，在關閉連接時似乎是全面的，那麼它可能無法完全關閉所有相關的資源。原因源於JDBC體系結構中的資源所有權。在您提供的代碼中，try-catch-Finally Block仔細關閉結果集，語句和連接。這種...

程式設計發佈於2025-05-01
大批
[2 數組是對象，因此它們在JS中也具有方法。切片（開始）：在新數組中提取部分數組，而無需突變原始數組。令ARR = ['a'，'b'，'c'，'d'，'e']; // USECASE：提取直到索引作...

程式設計發佈於2025-05-01
對象擬合：IE和Edge中的封面失敗，如何修復？
To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50％）...

程式設計發佈於2025-05-01