Tailwind CSS v3.4：动态视口单位、:has() 支持、均衡标题、子网格等

没有什么比为一个主要的新产品构建更能发现你希望在自己的工具中拥有的所有功能了，所以我们利用了一些灵感，将其转化为此 - Tailwind CSS v3.4。

与往常一样，改进范围从您多年来一直不满的事情，到支持您甚至从未听说过并且可能甚至在工作中都无法使用的 CSS 功能。

• 动态视口单位： 在移动设备上真正有效的全高元素。
• 新的 :has() 变体： 根据子元素样式化父元素。
• 使用 * 变体样式化子元素： 我们可能会后悔给您这个。
• 新的 size-* 实用工具： 终于可以同时设置宽度和高度。
• 使用 text-wrap 实用工具均衡标题： 不再需要调整 max-width 或响应式换行。
• 子网格支持： 您努力理解的网格功能，终于在 Tailwind CSS 中实现了。
• 扩展的 min-width、max-width 和 min-height 比例： 现在 min-w-12 是一个真正的类。
• 扩展的不透明度比例： 在 60% 或 70% 都不完全正确的情况下。
• 扩展的 grid-rows-* 比例： 不妨使其与列比例匹配。
• 新的 forced-colors 变体： 轻松为强制颜色模式微调您的站点。
• 新的 forced-color-adjust 实用工具： 用于更精细的强制颜色微调。

所有好东西都在列表中，但请查看发行说明，了解一些不够令人兴奋而无法在此帖子中出现的更多细节。

通过从 npm 安装最新版本的 tailwindcss 来升级您的项目

npm install tailwindcss@latest

或者直接在您的浏览器上通过 Tailwind Play 尝试所有新功能。

动态视口单位

当 vh 单位添加到浏览器时，我们都非常兴奋 - 终于有一种方法可以构建全高应用程序布局，而无需在 17 层 DOM 中钻取 height: 100%！但是移动设备及其该死的消失的菜单栏破坏了所有的乐趣，实际上使 vh 单位只是对可能非常美好的未来的残酷提醒。

我们现在有了一个新的未来——dvh、lvh 和 svh 旨在适应消失的浏览器 chrome，而 Tailwind CSS v3.4 开箱即用支持它们

<div class="h-dvh">  <!-- ... --></div>

我们默认添加了以下新类

如果您需要其他值，您始终可以使用任意值，例如 min-h-[75dvh]。

如今，这些单位的浏览器支持非常好，因此除非您需要支持 Safari 14，否则您可以立即开始使用它们。

新的 :has() 变体

:has() 伪类是自 flexbox 以来添加到 CSS 中最强大的功能。有史以来第一次，您可以根据元素的子元素来样式化元素，而不仅仅是根据其父元素。它甚至可以根据后续兄弟姐妹进行样式化。

这是一个示例，如果其中的单选按钮被选中，则父级会获得一个彩色的环

<label class="has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-500 ...">  <svg fill="currentColor">    <!-- ... -->  </svg>  Google Pay  <input type="radio" class="accent-indigo-500 ..." /></label>

在过去几个月我们一直在构建的这个新 UI 套件时，我觉得我每周都会发现 :has() 的新用例，它取代了我们代码中大量的 JavaScript。

例如，我们的文本输入在设计方面非常复杂，需要一个小包装元素来构建。如果没有 :has()，我们无法根据输入的 :disabled 状态等内容来样式化包装器，但现在我们可以了

export function Input({ ... }) {  return (    <span className="has-[:disabled]:opacity-50 ...">      <input ... />    </span>  )}

这个版本非常前沿，但就在今天，所有主要浏览器的最新版本现在都支持它。给 Firefox 用户几周时间安装今天的更新，我们应该能够疯狂使用它。

使用 * 变体样式化子元素

这是人们一直以来想要的东西 - 一种使用实用程序类从父级样式化子元素的方法。

我们添加了一个新的 * 变体，它针对直接子元素，允许您执行以下操作

<div>  <h2>Categories:<h2>  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">    <li>Sales</li>    <li>Marketing</li>    <li>SEO</li>    <!-- ... -->  </ul></div>

一般来说，我建议直接样式化子元素，但是当您不控制这些元素或者需要根据元素所使用的上下文进行有条件的调整时，这会很有用。

它也可以与其他变体组合，例如 hover:*:underline 将在悬停子元素时样式化任何子元素。

这是我们在我们正在开发的新 UI 工具包中，有条件地将布局样式添加到不同子元素的一种很酷的方式

function Field({ children }) {  return (    <div className="data-[slot=description]:*:mt-4 ...">      {children}    </div>  )}function Description({ children }) {  return (    <p data-slot="description" ...>{children}</p>  )}function Example() {  return (    <Field>      <Label>First name</Label>      <Input />      <Description>Please tell me you know your own name.</Description>    </Field>  )}

看到那个疯狂的 data-[slot=description]:*:mt-4 类了吗？它首先定位所有直接子元素（这是 *: 部分），然后使用 data-[slot=description] 将它们过滤到仅具有 data-slot="description" 属性的项目。

这使得可以轻松地仅定位特定的子元素，而无需一直下降到原始的任意变体。

期待看到每个人所做的所有可怕的事情，让我后悔添加此功能。

新的 size-* 实用工具

您厌倦了每次需要调整头像大小时输入 h-5 w-5，您知道这一点，我也知道。

在 Tailwind CSS v3.4 中，我们终于添加了一个新的 size-* 实用工具，可以同时设置宽度和高度

HTML

<div>  <img class="h-10 w-10" ...>  <img class="h-12 w-12" ...>  <img class="h-14 w-14" ...>  <img class="size-10" ...>  <img class="size-12" ...>  <img class="size-14" ...></div>

我们一直想添加它，但总是纠结于确切的名称 - 与 w-* 或 h-* 相比，size-* 感觉要输入很多，而 s-* 感觉太神秘了。

但在使用它几周后，我可以明确地说，即使名称较长，它也比单独的宽度和高度实用工具好得多。非常方便，特别是如果您将其与变体组合或使用复杂的任意值时。

使用 text-wrap 实用工具均衡标题

您花了多少时间摆弄 max-width 或插入响应式换行来尝试使您着陆页上的那些小节标题很好地换行？现在您可以在此上花费零时间，因为浏览器可以使用 text-wrap: balance 为您完成此操作

<article>  <h3 class="text-balance ...">Beloved Manhattan soup stand closes<h3>  <p>New Yorkers are facing the winter chill...</p></article>

我们还添加了 text-pretty，它尝试使用 text-wrap: pretty 避免段落末尾出现孤立的单词

<article class="text-pretty ...">  <h3>Beloved Manhattan soup stand closes<h3>  <p>New Yorkers are facing the winter chill...</p></article>

这些功能的优点在于，即使有人使用旧浏览器访问您的站点，它们也会回退到常规的包装行为，因此今天开始使用它们是完全安全的。

子网格支持

子网格是一个相对较新的 CSS 功能，它允许元素从其父元素中继承网格列或行，从而可以将子元素放置在父网格中。

<div class="grid grid-cols-4 gap-4">  <!-- ... -->  <div class="col-span-3 grid grid-cols-subgrid gap-4">    <div class="col-start-2">06</div>  </div>  <!-- ... --></div>

例如，我们在我们正在开发的新 UI 工具包中使用了子网格，在下拉菜单中，因此如果任何项目有图标，则所有其他项目都会缩进以保持文本对齐

<div role="menu" class="grid grid-cols-[auto_1fr]">  <a href="#" class="col-span-2 grid-cols-subgrid">    <svg class="mr-2">...</svg>    <span class="col-start-2">Account</span>  </a>  <a href="#" class="col-span-2 grid-cols-subgrid">    <svg class="mr-2">...</svg>    <span class="col-start-2">Settings</span>  </a>  <a href="#" class="col-span-2 grid-cols-subgrid">    <span class="col-start-2">Sign out</span>  </a></div>

当所有项目都没有图标时，第一列会缩小到 0px，并且文本会一直向左对齐。

请查看有关子网格的 MDN 文档 以获得完整的入门指南 - 它是一个有点棘手的功能，起初很难理解，但是一旦点击它，它就会改变游戏规则。

扩展的 min-width、max-width 和 min-height 比例

我们终于扩展了 min-width、max-width 和 min-height 比例以包括完整的间距比例，因此像 min-w-12 这样的类现在实际上是真实存在的

<div class="min-w-12">  <!-- ... --></div>

我们本应该在 v3.0 版本就做这些，但一直没抽出时间——我很抱歉，也欢迎使用这些新功能。

扩展的透明度比例

我们还扩展了透明度比例，使其包含每 5 个步长的值。

<div class="opacity-35">  <!-- ... --></div>

希望这意味着你的标记语言中会少一些任意值。下一个目标是 2.5%。

扩展的 grid-rows-* 比例

我们将内置的网格行数从 6 增加到 12，为什么不呢？

<div class="grid grid-rows-9">  <!-- ... --></div>

也许我们会在下一个版本中变得更疯狂，将其增加到 16。

新的 forced-colors 变体

听说过 强制颜色模式 吗？你的网站在这种模式下可能看起来很糟糕。

好吧，至少现在你不能责怪我们了，因为 Tailwind CSS v3.4 包含了一个 forced-colors 变体，用于调整强制颜色模式下的样式。

<form>  <input type="checkbox" class="appearance-none forced-colors:appearance-auto ..." /></form>

它对于微调完全自定义的控件非常有用，特别是结合任意值和 CSS 系统颜色 的工作知识时。

新的 forced-color-adjust 工具类

我们还添加了新的 forced-color-adjust-auto 和 forces-color-adjust-none 工具类，用于控制强制颜色模式如何影响你的设计。

<fieldset>  <legend>Choose a color</legend>  <div class="forced-color-adjust-none ...">    <label>      <input class="sr-only" type="radio" name="color-choice" value="white" />      <span class="sr-only">White</span>      <span class="size-6 rounded-full bg-white"></span>    </label>    <label>      <input class="sr-only" type="radio" name="color-choice" value="gray" />      <span class="sr-only">Gray</span>      <span class="size-6 rounded-full bg-gray-300"></span>    </label>    <!-- ... -->  </div></fieldset>

这些应该谨慎使用，但当某些内容必须以特定颜色呈现时非常有用，例如在线商店中选择某人正在购买的商品的颜色。

要了解有关强制颜色模式的更多信息，我建议阅读 Polypane 博客上的 “强制颜色解释：实用指南”——到目前为止，我发现的关于这个主题最有用的文章。

如果你一直密切关注，你可能想知道我们在今年夏天 Tailwind Connect 上预览的引擎改进 Oxide。

我们原本计划在 v3.4 中推出这些改进，但我们还有一些问题需要解决，而且其他这些改进也积累了很多，所以我们觉得最好还是把所有东西都发布出去，而不是推迟发布。Oxide 的内容仍然会到来，并将成为新年发布的下一个 Tailwind CSS 版本的主要改进。

同时，通过 npm 更新到最新版本来深入了解 Tailwind CSS v3.4。

$ npm install tailwindcss@latest

有了 :has() 和新的 * 变体，你的 HTML 将比以往任何时候都更失控。