我本希望把 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)
组件 variants 支持(Component variants support)
在 Tailwind CSS v1.5.0 之前，只有“工具”类真正打算与 variants 一起使用（比如“响应式”、“悬停”、“聚焦”等）
🌐 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 熟悉的数组简写方式：
plugin(function ({ addComponents })) { addComponents({ '.card': { // ... } }, ['responsive'])})要在自定义 CSS 中利用这些功能（而不是使用插件 API），你可以使用一个新的 @layer 指令明确告诉 Tailwind，你的样式属于“组件”类别：
🌐 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，确保在使用默认的“保守”清理模式时不会删除任何响应式组件变体。
🌐 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)
借助新组件 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)
我们已经通过一个新的 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)
我们新增了一个 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"], },};想讨论这篇文章吗？ 在 GitHub 上讨论 →