Tailwind CSS v1.5.0

我本来希望将 v1.5.0 留到真正令人兴奋的时候，但我们需要一个新功能来支持新的 @tailwindcss/typography 插件，所以加油，我们提前给大家带来一些新东西。

¥I was hoping to save v1.5.0 for something really exciting but we needed a new feature to support the new @tailwindcss/typography plugin so h*ck it, we're dropping some new stuff on you early.

没有重大更改，这是一个次要版本，我们是专业人士，你这个傻瓜。

¥No breaking changes, this is a minor release and we're professionals you silly goose.

新功能(New features)

¥New features

组件 variants 支持(Component variants support)

¥Component variants support

在 Tailwind CSS v1.5.0 之前，只有 "utility" 类真正打算与 variants 一起使用（例如 "responsive"、"hover"、"focus" 等）。

¥Until Tailwind CSS v1.5.0, only "utility" classes were really intended to be used with variants (like "responsive", "hover", "focus", etc.)

虽然这些对于实用程序来说仍然比任何其他类型的类更有用，但我们现在也支持为组件类生成变体，例如新 @tailwindcss/typography 插件中的 prose 类：

¥While these are still much more useful for utilities than any other type of class, we now support generating variants for component classes as well, like the prose classes in the new @tailwindcss/typography plugin:

<article class="prose md:prose-lg">
  <!-- Content -->
</article>

你可以在自己的组件类中使用此功能，方法是在 addComponents 插件 API 的第二个参数中使用新的 variants 选项：

¥You can take advantage of this feature in your own component classes by using the new variants option in the second argument of the addComponents plugin API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...或者使用你可能熟悉的 addUtilities API 数组简写：

¥...or using the array shorthand you might be familiar with from the addUtilities API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

要在你的自定义 CSS 中利用这些功能（而不是使用插件 API），你可以使用新的 @layer 指令明确告知 Tailwind 你的样式属于 "components" 存储桶：

¥To take advantage of these feature in your custom CSS (rather than using the plugin API), you can use a new @layer directive to explicitly tell Tailwind that your styles belong to the "components" bucket:

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

这有助于 Tailwind 正确清除未使用的 CSS，确保在使用默认的 "conservative" 清除模式时不会删除任何响应式组件变体。

¥This helps Tailwind purge your unused CSS correctly, ensuring it doesn't remove any responsive component variants when using the default "conservative" purge mode.

响应式 container 变体(Responsive container variants)

¥Responsive container variants

借助新组件 variants 的支持，container 类现在支持变体！

¥Piggy-backing off of the new component variants support, the container class now supports variants!

<!-- Only lock the width at `md` sizes and above -->
<div class="md:container">
  <!-- ... -->
</div>

我们默认启用了响应式变体，但如果你觉得麻烦，也可以手动启用其他变体，例如 focus、group-hover 等等：

¥We've enabled responsive variants by default, but if you are sick in the head you can also manually enable other variants like focus, group-hover, whatever:

module.exports = {
  // ...
  variants: {
    container: ["responsive", "focus", "group-hover"],
  },
};

新的 focus-visible 变体(New focus-visible variant)

¥New focus-visible variant

我们使用新的 focus-visible 变体添加了对 :focus-visible 伪类 的支持。

¥We've added support for the :focus-visible pseudo-class using a new focus-visible variant.

这对于添加仅对键盘用户可见、鼠标用户忽略的焦点样式非常有用：

¥This is super useful for adding focus styles that only appear to keyboard users, and are ignored for mouse users:

<button class="focus-visible:shadow-outline focus-visible:outline-none ...">Click me</button>

默认情况下，它不会启用任何功能，但你可以在配置文件的 variants 部分中启用它：

¥It's not enabled for anything by default, but you can enable it in the variants section of your config file:

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "focus-visible"],
  },
};

浏览器对此的支持度仍然很弱，但正在不断改善。同时，如果你想立即在所有浏览器中使用此功能，请查看 polyfill 和相应的 PostCSS 插件。

¥Browser support is still pretty weak on this but getting better. In the mean time, check out the polyfill and corresponding PostCSS plugin if you'd like to use this in all browsers right away.

新的 checked 变体(New checked variant)

¥New checked variant

我们添加了一个新的 checked 变体，你可以使用它来有条件地设置复选框和单选按钮等内容的样式：

¥We've added a new checked variant you can use to conditionally style things like checkboxes and radio buttons:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

默认情况下，它不会启用任何功能，但你可以在配置文件的 variants 部分中启用它：

¥It's not enabled for anything by default, but you can enable it in the variants section of your config file:

module.exports = {
  // ...
  variants: {
    backgroundColor: ["responsive", "hover", "focus", "checked"],
  },
};

想要讨论这篇文章吗？Discuss this on GitHub →

¥Want to talk about this post? Discuss this on GitHub →