Tailwind CSS v1.5.0
内容提要
Tailwind CSS v1.5.0 更新了多个新特性，包括支持组件变体和响应式容器变体。新增的 focus-visible 变体仅对键盘用户显示焦点样式，同时引入了 checked 变体用于条件样式。用户可在配置文件中启用这些变体。
延伸解读
组件变体：从工具类到组件类的扩展
此前 Tailwind 的变体（如响应式、hover）主要针对工具类，v1.5.0 开始支持为组件类生成变体。这意味着像 @tailwindcss/typography 插件的 prose 类也能使用 md:prose-lg 这样的响应式前缀。开发者可以通过插件 API 的 variants 选项或 @layer 指令来为自己的组件类启用变体，这提升了组件类在不同状态和断点下的灵活性。
响应式容器：更精细的宽度控制
容器类现在支持变体，默认启用了响应式变体。例如 md:container 可以让容器仅在中等屏幕及以上锁定宽度，避免在小屏幕上过早固定宽度。如果需要，还可以手动启用 focus、group-hover 等其他变体，但需在配置文件的 variants 中显式添加。这为布局提供了更细粒度的控制。
focus-visible 与 checked：增强交互状态样式
新增的 focus-visible 变体利用 :focus-visible 伪类，只为键盘用户显示焦点样式，鼠标用户则不会看到，有助于提升可访问性。checked 变体则用于根据复选框或单选按钮的选中状态应用样式。两者默认都未启用，需要在配置文件的 variants 部分手动开启。注意 focus-visible 的浏览器支持仍较弱，可考虑使用 polyfill 和 PostCSS 插件。
Q&A
Tailwind CSS v1.5.0 新增了哪些主要特性？
Tailwind CSS v1.5.0 新增了组件变体、响应式容器变体、focus-visible 变体和 checked 变体。
如何在 Tailwind CSS 中启用 focus-visible 变体？
可以在配置文件的变体部分启用 focus-visible 变体，例如：module.exports = { variants: { backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'], }, };
组件变体支持在 Tailwind CSS 中有什么用？
组件变体支持允许用户为组件类生成变体，例如在 @tailwindcss/typography 插件中的 prose 类。
响应式容器变体的默认设置是什么？
响应式容器变体在 Tailwind CSS v1.5.0 中默认支持，但用户可以手动启用其他变体如 focus 和 group-hover。
checked 变体在 Tailwind CSS 中的应用场景是什么？
checked 变体用于条件样式，适用于复选框和单选按钮。
如何在自定义 CSS 中使用组件变体？
可以使用新的 @layer 指令来明确告诉 Tailwind 你的样式属于 'components' 类别，例如：@layer components { @responsive { .card { /* ... */ } }}。
