Tailwind v 中令人興奮的更新
瀏覽：742
幾個月前（撰寫本文時），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 日
現在，整體變化已經完成，讓我們看看 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 網站上嘗試示範。
現在，您只需將 field-sizing-content 類別新增至文字區域即可使用它。後代更新
Tailwind stable（您可能不知道這一點）有一個 * 變體，允許您針對具有類別的元素的 direct 子元素。例如：
Tailwind v4 中的新 ** 變體將針對 所有後代：
插入陰影（和環）
現在使用 inset-shadow 和 inset-ring 類別可以輕鬆地在元素上建立插圖陰影和圓環。
還有更多！
如果您想查看所有新增內容，請訪問 https://tailwindcss.com/docs/v4-beta 並查看它們！
這篇文章是#discuss 文章！這就是為什麼我保持簡短的原因；我想知道你的想法！
我知道你們中很多討厭 Tailwind 的人可能會給我一些回饋？
肯定有一些有爭議的新功能，我想得到一些意見？總結：發表評論！
感謝您的閱讀！
最佳代碼
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1 和 $array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建...程式設計 發佈於2024-12-23 -
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-12-23
-
插入資料時如何修復「常規錯誤：2006 MySQL 伺服器已消失」？插入記錄時如何解決「一般錯誤：2006 MySQL 伺服器已消失」介紹：將資料插入MySQL 資料庫有時會導致錯誤「一般錯誤：2006 MySQL 伺服器已消失」。當與伺服器的連線遺失時會出現此錯誤，通常是由於 MySQL 配置中的兩個變數之一所致。 解決方案：解決此錯誤的關鍵是調整wait_tim...程式設計 發佈於2024-12-23
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-12-23
-
儘管程式碼有效，為什麼 POST 請求無法擷取 PHP 中的輸入？解決PHP 中的POST 請求故障在提供的程式碼片段中：action=''而非：action="<?php echo $_SERVER['PHP_SELF'];?>";?>"檢查$_POST陣列：表單提交後使用 var_dump 檢查 $_POST 陣列的內...程式設計 發佈於2024-12-23
-
為什麼我的 Angular HTTP POST 值在 PHP 中未定義，如何修復它？Angular HTTP POST 到PHP：處理未定義的POST 值在AngularJS 中，對PHP 端點執行HTTP POST 請求有時會導致未定義的值伺服器端的POST 值。當預期資料格式與 Angular 應用程式傳送的實際資料不符時，就會發生這種情況。 要解決此問題，確保正確設定 Con...程式設計 發佈於2024-12-23
-
Go可以存取初始標準輸入流嗎？在 Go 中，您可以存取初始標準輸入嗎？ 在 Go 中，使用 os.Stdin 從原始標準輸入讀取應該會產生所需的結果，如圖所示通過這個代碼片段：package main import "os" import "log" import "io&quo...程式設計 發佈於2024-12-23
-
極簡密碼管理器桌面應用程式：進軍 Golang 的 Wails 框架（第 2 部分）Hi again, coders! In the first part of this short series we saw the creation and operation of a desktop application to store and encrypt our passwords...程式設計 發佈於2024-12-23
-
ES6 React 元件：何時使用基於類別與函數式？在ES6 基於類別和函數式ES6 React 元件之間做出選擇使用React 時，開發人員面臨著使用ES6 基於類別的選擇組件或功能ES6 組件。了解每種類型的適當用例對於最佳應用程式開發至關重要。 函數式 ES6 元件：無狀態且簡單函數式元件是無狀態的，這表示它們不維護任何內部狀態。他們只是接收道...程式設計 發佈於2024-12-23
-
如何在 PHP 中找到兩個平面數組之間的唯一值？在平面數組之間查找唯一值給定兩個數組，任務是確定僅存在於其中一個數組中的值。此操作通常稱為尋找兩個集合之間的差異。 在 PHP 中，您可以利用 array_merge、array_diff 和 array_diff 函數來實現此操作。詳細解法如下：$array1 = [64, 98, 112, 92...程式設計 發佈於2024-12-23
-
CSS 可以在內聯區塊元素中本機插入換行符號嗎？CSS 在行內區塊元素中插入換行符：理論探索在不斷發展的Web 開發領域，這種能力操縱內容流仍然是最重要的。經常出現的一個特殊挑戰涉及在內聯區塊元素中插入換行符。 考慮以下 HTML 結構：<h3 id="features">Features</h3> &...程式設計 發佈於2024-12-23
-
如何在 PHP 中輕鬆轉換時區之間的時間和日期？在PHP 中轉換時區之間的時間和日期使用PHP，您可以輕鬆地在不同時區之間轉換時間和日期。此功能在處理全球資料的應用程式或與來自不同位置的使用者一起工作時特別有用。 取得時區偏移量要取得與 GMT 的時間偏移量，您可以使用 DateTimeZone 類別。它提供了時區及其各自偏移量的完整清單。 $t...程式設計 發佈於2024-12-23
-
如何在Windows上安裝並使用Pip進行Python套件管理？Pip：在Windows 上安裝Python 套件的輕鬆方式在Windows 上安裝Python 套件可能是一項艱鉅的任務，特別是如果您在使用EasyInstall 時遇到困難。幸運的是，EasyInstall 的後繼者 Pip 提供了更簡化和簡化的解決方案。 在Windows 上逐步安裝Pip若要...程式設計 發佈於2024-12-23
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
