工作中同事突然群里提了一嘴：Tailwind v3.3 这个新特性不错欸，行高字号终于可以写一个类了，于是摸鱼看了下 Tailwind 更新，不说废话，直接上总结～
Tailwind CSS v3.3 于 2023 年 3 月 28 日发布了，这是一个非常棒的版本，它为我们带来了许多新的特性和改进，让我们的开发更加高效和灵活。在本文中，将介绍一些最令人兴奋的新功能，包括：
- 用于深色的扩展调色板：为扩展的颜色调色板，为每种颜色增加了更深的 950 色阶，现在有 11 种色调，eg：
bg-slate-950
-
ESM 和 TypeScript 支持：支持 ESM 和 TypeScript 配置文件，让你可以用现代的语法和类型检查来配置 Tailwind CSS。
-
微调渐变颜色停止位置 ：让你可以精确地控制渐变效果，可以准确指定渐变颜色中每个色标的位置。如
from-5%、via-35%和to-85%
- 开箱即用的 Line-clamp ：无需插件即可截断多行文本，如
line-clamp-3。
我们在两年多前发布了我们的官方 line-clamp 插件，尽管它使用了一堆奇怪的已弃用的 -webkit-* 东西，但它适用于所有浏览器，而且它将永远有效，所以我们决定将它整合到框架中本身。
-
🌟字体大小及行高简写 ：这个很有用，可以使用一个类设置字体大小和行高（不在预设中时），如
text-lg/7、text-sm/[17px]、text-[20px]/[24px]
-
没有 var () 的 CSS 变量 ：支持 CSS 变量的简写语法，让你可以用任意值而不需要 var () 函数，使用如下：
before:bg-[var(--brand-color)]
after:bg-[--brand-color] -
可配置的 font-variation-settings：支持配置 font-variation-settings，让你可以直接使用 font-* 工具类来设置字体变化
-
🌟新的 list-style-image 实用类 ：这个也很有用，想使用图片作为您的列表项标记吗？那么现在可以使用新的
list-image-*实用程序。eg：list-image-[url(carrot.png)]
- 🌟新的 hyphens 实用类 ：用于微调断字行为。
听说过 HTML 实体吗？在添加对这些 hyphens-* 实用类的支持之前，我们也没听说。
使用 hyphens-manual 和仔细放置的 ，您可以告诉浏览器在需要跨多行分隔单词时在何处插入连字符。
- 🌟新的 caption-side 实用类：用于控制表格内标题元素对齐的实用类，可以给表格添加标题并设置位置。详见 Caption Side
-
caption-bottom将标题元素定位在表格的顶部 -
caption-bottom将标题元素定位在表格的底部。
以上这些只是一部分最亮眼的新特性，如果你想了解更多的细节和改进，请查看完整的发布说明。如果你想尽快升级到 v3.3 版本，只需要从 npm 安装最新的 tailwindcss 包即可：
npm install -D tailwindcss@latest
你也可以在 Tailwind Play 上在线体验所有的新特性。