工作中同事突然群里提了一嘴: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]
🌟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 上在线体验所有的新特性。