TailwindCSS 现已推出动态视窗单位、:has() 支持、平衡标题、子网格等新功能!
发布于 作者: Eric L. Barnes
Tailwind v3.4 现已发布,其中包含动态视窗单位、:has() 支持、平衡标题、子网格等新功能!
在发布公告中,Adam Wathan 提到这些功能中的许多与他们正在构建的新 Catalyst UI 工具包直接相关。
没有什么是比构建一个主要的新产品更能发现您希望在自己的工具中拥有的所有功能,因此我们利用了一些灵感并将其转化为 - Tailwind CSS v3.4。
与往常一样,这些改进包括您多年来一直感到愤怒的事情,以及支持您从未听说过而且可能在工作中都无法使用的 CSS 功能。
主要亮点包括
- 动态视窗单位:真正可以在移动设备上使用的全高元素。
- 新 :has() 变体:根据子元素的样式设置父元素。
- 使用 * 变体为子元素设置样式:我们可能后悔给您这个功能。
- 新 size-* 实用程序:同时设置宽度和高度,终于实现了。
- 使用 text-wrap 实用程序平衡标题:不再需要调整最大宽度或响应式换行。
- 子网格支持:您一直难以理解的网格功能,终于在 Tailwind CSS 中实现了。
- 扩展的最小宽度、最大宽度和最小高度比例:现在 min-w-12 是一个真正的类。
- 扩展的透明度比例:对于那些既不使用 60% 也不使用 70% 的情况。
- 扩展的 grid-rows-* 比例:可能与列比例匹配。
- 新强制颜色变体:轻松为强制颜色模式微调您的网站。
- 新强制颜色调整实用程序:用于更精细地控制强制颜色。
查看 完整公告,了解此新版本的详细信息,您可以通过运行以下命令立即开始使用它。
npm install tailwindcss@latest