Tailwind CSS v3.4 支持动态视口单位(dvh,lvh,svh)、支持 :has()、支持子网格等功能。

Tailwind v3.4 已发布，现支持动态 viewport 单位、支持 :has()、子网格等！

在最近的发布公告中，Adam Wathan 提到许多与构建新的 Catalyst UI 套件直接相关的功能：

There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on some of that inspiration and turned it into this — Tailwind CSS v3.4.

As always the improvements range from things you’ve been angry about for years, to supporting CSS features you’ve never even heard of and probably can’t even use at work.

亮点包括：

• 动态视口(viewport)单位：真正适用于移动设备的全高元素。
• 新增 :has() 变量：基于子元素定义父元素样式。
• 使用 * 变量定义子元素样式。
• 新增 size-* utilities：同时设置宽高。
• 使用 text-wrap 文本换行处理标题：不再进行最大宽度调整或响应换行
• 子网格(Subgrid)支持：你很难理解的网格功能，最终出现在 Tailwind CSS 中。
• 扩展最小宽度(min-width)、最大宽度(max-width)和最小高度(min-height)刻度：现在 min-w-12 是一个真正的类。
• 扩展透明刻度：曾经 60% 或 70% 不太准确。
• 扩展 grid-rows-* 刻度：不妨让它与 columns 的刻度相匹配。
• 新增强制颜色(forced-colors)变量：轻松微调网站强制颜色模式。
• 新增 forced-color-adjust ：用于更多的强制颜色微调。

有关此新版本的所有详细信息，请参阅完整的公告，你可以通过运行以下命令立即开始使用：

npm install tailwindcss@latest