我本想为 v1.5.0 准备一些_真正_令人兴奋的内容，但我们需要一个新功能来支持新的 @tailwindcss/typography 插件，所以管它呢，我们提前发布一些新东西给你。
没有破坏性更改，这是一个次要版本，我们可是专业人士，你这个傻瓜。
新功能
组件 variants 支持
在 Tailwind CSS v1.5.0 之前，只有"工具类"真正支持使用 variants（如"responsive"、"hover"、"focus"等）
虽然这些对工具类来说仍然比其他类型的类更有用，但我们现在也支持为组件类生成变体，比如新的 @tailwindcss/typography 插件中的 prose 类：
<article class="prose md:prose-lg"> <!-- 内容 --></article>你可以通过在 addComponents 插件 API 的第二个参数中使用新的 variants 选项来利用此功能：
plugin(function ({ addComponents })) { addComponents({ '.card': { // ... } }, { variants: ['responsive'] })})...或者使用你可能熟悉的 addUtilities API 的数组简写：
plugin(function ({ addComponents })) { addComponents({ '.card': { // ... } }, ['responsive'])})要在自定义 CSS 中利用这些功能（而不是使用插件 API），你可以使用新的 @layer 指令明确告诉 Tailwind 你的样式属于"组件"部分：
@layer components { @responsive { .card { /* ... */ } }}这有助于 Tailwind 正确清除未使用的 CSS，确保在使用默认的"保守"清除模式时不会删除任何响应式组件变体。
响应式 container 变体
基于新的组件 variants 支持，container 类现在支持变体！
<!-- 仅在 `md` 尺寸及以上锁定宽度 --><div class="md:container"> <!-- ... --></div>我们默认启用了响应式变体，但如果你脑子有病，你也可以手动启用其他变体，如 focus、group-hover 等：
module.exports = { // ... variants: { container: ["responsive", "focus", "group-hover"], },};新的 focus-visible 变体
我们添加了对 :focus-visible 伪类 的支持，使用新的 focus-visible 变体。
这对于添加仅对键盘用户可见的焦点样式非常有用，而鼠标用户则会忽略这些样式：
<button class="focus-visible:shadow-outline focus-visible:outline-none ...">点击我</button>默认情况下未启用任何内容，但你可以在配置文件的 variants 部分启用它：
module.exports = { // ... variants: { backgroundColor: ["responsive", "hover", "focus", "focus-visible"], },};浏览器支持仍然很弱，但正在改善。同时，如果你想立即在所有浏览器中使用它，请查看polyfill 和相应的 PostCSS 插件。
新的 checked 变体
我们添加了一个新的 checked 变体，你可以用它来有条件地样式化复选框和单选按钮：
<input type="checkbox" class="bg-white checked:bg-blue-500" />默认情况下未启用任何内容，但你可以在配置文件的 variants 部分启用它：
module.exports = { // ... variants: { backgroundColor: ["responsive", "hover", "focus", "checked"], },};想讨论这篇文章吗？在 GitHub 上讨论 →