Tailwind CSS v3.4：动态视口单位、:has() 支持、平衡标题、子网格等新特性
内容提要
Tailwind CSS v3.4 引入了动态视口单位、:has() 伪类、* 变体、size-* 工具、文本换行工具和子网格支持等新特性。这些功能提升了样式灵活性，简化了开发流程，支持更复杂的布局和样式调整。用户可通过 npm 更新到最新版本以体验这些改进。
延伸解读
动态视口单位：解决移动端全高布局痛点
文章指出，传统的 vh 单位在移动端因浏览器菜单栏的隐藏/显示而导致全高元素显示不全。Tailwind CSS v3.4 新增了 h-dvh、h-lvh、h-svh 等工具类，分别对应动态、大、小视口高度，让全高布局在移动设备上真正可用。这些类也支持 min-h-* 和 max-h-* 前缀，并可使用任意值如 min-h-[75dvh]。浏览器支持良好，除非需要兼容 Safari 14，否则可立即使用。
:has() 与 * 变体：增强父子样式控制
文章强调 :has() 伪类允许根据子元素状态样式化父元素，例如当内部单选按钮选中时，父元素获得背景和边框变化。新增的 * 变体则让父元素直接样式化所有直接子元素，并可与其他变体组合，如 hover:*:underline。作者提到这些特性可减少 JavaScript 的使用，但 * 变体可能被滥用。:has() 已获所有主流浏览器最新版支持，但 Firefox 用户可能需要时间更新。
文本换行与子网格：简化布局与排版
文章介绍 text-balance 和 text-pretty 工具类，分别用于平衡标题换行和避免段落孤行，且在不支持的浏览器中会回退到正常换行，可安全使用。子网格支持通过 grid-cols-subgrid 等类实现，让子元素继承父网格布局，适用于下拉菜单等场景，使图标对齐更灵活。作者提醒子网格概念较难理解，但掌握后非常有用。
扩展比例与强制颜色：细节优化与可访问性
文章提到 v3.4 扩展了 min-width、max-width、min-height 比例至完整间距刻度，新增 opacity-35 等不透明度级别，并将 grid-rows-* 从 6 行增加到 12 行。此外，新增 forced-colors 变体和 forced-color-adjust 工具，用于在强制颜色模式下微调样式，尤其适合自定义控件。作者建议谨慎使用这些工具，仅在必须固定颜色时（如电商选色）使用。
Q&A
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' 更新到最新版本。
