Tailwind CSS Blog
·
Tailwind CSS v1.5.0
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Tailwind CSS v1.5.0 更新了多个新特性，包括支持组件变体和响应式容器变体。新增的 focus-visible 变体仅对键盘用户显示焦点样式，同时引入了 checked 变体用于条件样式。用户可在配置文件中启用这些变体。
🎯
关键要点
- Tailwind CSS v1.5.0 更新了多个新特性，包括支持组件变体和响应式容器变体。
- 新增的组件变体支持使得组件类（如新 @tailwindcss/typography 插件中的 prose 类）可以生成变体。
- 响应式容器变体现在默认支持，可以手动启用其他变体如 focus 和 group-hover。
- 新增的 focus-visible 变体仅对键盘用户显示焦点样式，用户可以在配置文件中启用。
- 新增的 checked 变体用于条件样式，适用于复选框和单选按钮，用户也可以在配置文件中启用。
❓
延伸问答
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 { /* ... */ } }}。
➡️
