Tailwind CSS v3.4 引入了许多新特性和改进,包括:
1. 动态视口单位:新增
2.
3. `` 变体:用于从父元素使用实用类样式化直接子元素,提高样式的灵活性和可用性。
4. 新的
5. 平衡标题和文本包裹实用工具:通过
6. Subgrid 支持:让元素可以继承其父元素的网格列或行,使子元素能够放置在父网格中。
7. 扩展的最小宽度、最大宽度和最小高度比例尺:包括完整的间距比例尺,使诸如
8. 扩展的不透明度比例尺:包括每隔 5% 的步长,减少了自定义值的需求。
9. 扩展的网格行比例尺:将内置的网格行数从 6 增加到 12。
10. 新的强制颜色模式变体:为强制颜色模式调整样式,提供更细致的控制。
11. 新的强制颜色调整实用工具:控制强制颜色模式如何影响设计,用于在关键情况下确保特定颜色的渲染。
#CSS #Tailwindcss
https://tailwindcss.com/blog/tailwindcss-v3-4
1. 动态视口单位:新增
dvh
, lvh
, 和 svh
单位,以适应移动设备上浏览器的变化,支持全高度元素。2.
:has()
伪类支持:允许根据子元素来样式化父元素,为 CSS 添加强大的新功能。3. `` 变体:用于从父元素使用实用类样式化直接子元素,提高样式的灵活性和可用性。
4. 新的
size-*
实用工具:允许同时设置元素的宽度和高度,简化了尺寸设置。5. 平衡标题和文本包裹实用工具:通过
text-wrap: balance
和 text-pretty
实用工具,自动优化文本折行和标题布局。6. Subgrid 支持:让元素可以继承其父元素的网格列或行,使子元素能够放置在父网格中。
7. 扩展的最小宽度、最大宽度和最小高度比例尺:包括完整的间距比例尺,使诸如
min-w-12
这样的类成为可能。8. 扩展的不透明度比例尺:包括每隔 5% 的步长,减少了自定义值的需求。
9. 扩展的网格行比例尺:将内置的网格行数从 6 增加到 12。
10. 新的强制颜色模式变体:为强制颜色模式调整样式,提供更细致的控制。
11. 新的强制颜色调整实用工具:控制强制颜色模式如何影响设计,用于在关键情况下确保特定颜色的渲染。
#CSS #Tailwindcss
https://tailwindcss.com/blog/tailwindcss-v3-4
Tailwindcss
Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more
There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.