首頁 > web前端 > css教學 > Tailwind v 中令人興奮的更新

Tailwind v 中令人興奮的更新

Susan Sarandon
發布: 2024-12-08 13:48:11
原創
413 人瀏覽過

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

Exciting updates in Tailwind v�

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

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

<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>

登入後複製

以上是Tailwind v 中令人興奮的更新的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
上一篇:為什麼我的子 DIV 不繼承其浮動父級的 100% 高度? 下一篇:為什麼 `grid-template-rows` 中的 `minmax()` 有利於最大尺寸,以及如何保持最小行高?
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
關於CSS心智圖的課件在哪? 課件
來自於 2024-04-16 10:10:18
0
0
1909
相關專題
更多>
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板