Tailwind CSS Blog
·
Tailwind CSS v3.4：动态视口单位、:has() 支持、平衡标题、子网格等新特性
💡
原文英文，约1900词，阅读约需7分钟。
📝
内容提要
Tailwind CSS v3.4 引入了动态视口单位、:has() 伪类、* 变体、size-* 工具、文本换行工具和子网格支持等新特性。这些功能提升了样式灵活性，简化了开发流程，支持更复杂的布局和样式调整。用户可通过 npm 更新到最新版本以体验这些改进。
🎯
关键要点
- Tailwind CSS v3.4 引入了动态视口单位，支持移动设备的全高元素。
- 新增 :has() 伪类，允许根据子元素的状态来样式化父元素。
- 新增 * 变体，允许父元素样式化直接子元素。
- 新增 size-* 工具，能够同时设置宽度和高度。
- 新增文本换行工具，简化标题的样式调整。
- 支持子网格，使子元素能够继承父元素的网格布局。
- 扩展了最小宽度、最大宽度和最小高度的比例。
- 扩展了不透明度比例，提供更多选择。
- 扩展了网格行的比例，从6行增加到12行。
- 新增强制颜色变体，支持在强制颜色模式下调整样式。
- 新增强制颜色调整工具，控制强制颜色模式对设计的影响。
❓
延伸问答
Tailwind CSS v3.4 新增了哪些动态视口单位？
新增了 dvh、lvh 和 svh 单位，支持移动设备的全高元素。
:has() 伪类在 Tailwind CSS v3.4 中有什么用？
:has() 伪类允许根据子元素的状态来样式化父元素，增强了样式灵活性。
Tailwind CSS v3.4 如何简化标题的样式调整？
新增了文本换行工具，使用 text-wrap: balance 和 text-wrap: pretty 来优化标题样式。
什么是子网格支持，它在 Tailwind CSS v3.4 中的作用是什么？
子网格支持允许子元素继承父元素的网格布局，简化复杂布局的实现。
Tailwind CSS v3.4 中的 size-* 工具有什么优势？
size-* 工具可以同时设置元素的宽度和高度，简化了样式书写。
如何更新到 Tailwind CSS v3.4 的最新版本？
可以通过命令 'npm install tailwindcss@latest' 更新到最新版本。
➡️
