Tailwind CSS v3.3 发布，支持 ESM/TS、丰富调色板颜色-热头条

Tailwind CSS v3.3 带来了大量的新内容，更新内容如下：

(资料图片仅供参考)

扩展的深色调色板：

在 Tailwind CSS v3.3 中，为每一种颜色都增加了一个新的950色调，为每一种颜色增加了更加深的色调

ESM 和 TypeScript 支持：

现在可以在 ESM 和 TypeScript 中配置 Tailwind CSS

用逻辑属性简化 RTL 支持：

现在你可以使用逻辑属性来更容易和自动地完成大部分的样式设计，建立适应不同方向的布局。

新的实用程序，如 ms-3和 me-3，可以为元素的开始和结束设置样式，以便样式自动适应 RTL。

微调渐变色的位置：

增加了新的工具，如from-5%，via-35%和to-85%，让你调整渐变色中每个色块的实际位置，准确地指定位置。

开箱即用 Line-clamp：

Tailwind 在两年前发布了官方的 line-clamp 插件，尽管它使用了一堆奇怪的废弃的-webkit-*的东西，但它在每个浏览器中都能正常运行，而且会一直运行下去，所以我们决定把它植入框架本身。

因此，当你升级到 v3.3 时，如果你正在使用 line-clamp 插件，你可以安全地移除它。

新的字体大小实用程序的行高缩写

在用 Tailwind 设置行高时，从来没有同时设置字体大小的功能。因此，受颜色不透明度修改器语法的启发，Tailwind 决定用一个单一的工具来设置它们，从而节省一些字符。

没有var()的 CSS 变量

本着减少输入的精神，Tailwind 在使用 CSS 变量作为任意值时，也可以省略var()

可配置的font-variation-settings:

当使用自定义字体时，你经常想要配置诸如 font-feature-settings或 font-variation-settings，以加入的字体提供特定调整。

之前已经可以让font-feature-settings做到这一点了，现在你也可以对font-variation-settings进行同样的设置。

新的 list-style-image实用程序

想过用胡萝卜的图片作为你的列表项目标记吗？现在你可以使用新的 list-image-*实用工具来实现以剪贴画来作为列表项目标记。

5 cups chopped Porcini mushrooms

新的hyphens工具

增加了对这些hyphens-*工具的支持，使用hyphens-manual和­，可以告诉浏览器在需要把一个词分成多行时在哪里插入一个连字符：

    ... Kraftfahrzeug­Haftpflichtversicherung is a ...

更多详情可查看：https://tailwindcss.com/blog/tailwindcss-v3-3