cos

工作中同事突然群裡提了一嘴：Tailwind v3.3 這個新特性不錯欸，行高字號終於可以寫一個類了，於是摸魚看了下 Tailwind 更新，不說廢話，直接上總結～

Tailwind CSS v3.3 於 2023 年 3 月 28 日發布了，這是一個非常棒的版本，它為我們帶來了許多新的特性和改進，讓我們的開發更加高效和靈活。在本文中，將介紹一些最令人興奮的新功能，包括：

1. 用於深色的擴展調色板：為擴展的顏色調色板，為每種顏色增加了更深的 950 色階，現在有 11 種色調，eg： bg-slate-950

2. ESM 和 TypeScript 支持：支持 ESM 和 TypeScript 配置文件，讓你可以用現代的語法和類型檢查來配置 Tailwind CSS。

3. 微調漸變顏色停止位置 ：讓你可以精確地控制漸變效果，可以準確指定漸變顏色中每個色標的位置。如 from-5%、via-35% 和 to-85%

4. 開箱即用的 Line-clamp ：無需插件即可截斷多行文本，如 line-clamp-3。

我們在兩年多前發布了我們的官方 line-clamp 插件，儘管它使用了一堆奇怪的已棄用的 -webkit-* 東西，但它適用於所有瀏覽器，而且它將永遠有效，所以我們決定將它整合到框架中本身。

5. 🌟字體大小及行高簡寫 ：這個很有用，可以使用一個類設置字體大小和行高（不在預設中時），如 text-lg/7、 text-sm/[17px] 、 text-[20px]/[24px]
   

6. 沒有 var () 的 CSS 變量 ：支持 CSS 變量的簡寫語法，讓你可以用任意值而不需要 var () 函數，使用如下：
   before: bg-[var(--brand-color)]
   after: bg-[--brand-color]

7. 可配置的 font-variation-settings：支持配置 font-variation-settings，讓你可以直接使用 font-* 工具類來設置字體變化

8. 🌟新的 list-style-image 實用類 ：這個也很有用，想使用圖片作為您的列表項標記嗎？那麼現在可以使用新的 list-image-* 實用程序。eg： list-image-[url(carrot.png)]

9. 🌟新的 hyphens 實用類 ：用於微調斷字行為。

聽說過 ­ HTML 實體嗎？在添加對這些 hyphens-* 實用類的支持之前，我們也沒聽說。

使用 hyphens-manual 和仔細放置的 ­ ，您可以告訴瀏覽器在需要跨多行分隔單詞時在何處插入連字符。

10. 🌟新的 caption-side 實用類：用於控制表格內標題元素對齊的實用類，可以給表格添加標題並設置位置。詳見 Caption Side
    

• caption-bottom 將標題元素定位在表格的頂部

• caption-bottom 將標題元素定位在表格的底部。

以上這些只是一部分最亮眼的新特性，如果你想了解更多的細節和改進，請查看完整的發布說明。如果你想儘快升級到 v3.3 版本，只需要從 npm 安裝最新的 tailwindcss 包即可：

npm install -D tailwindcss@latest

你也可以在 Tailwind Play 上線體驗所有的新特性。