#前端 #tailwind #css #新动态
想了想还是加一个 #新动态 的 tag,虽然很多更新一般没时间看,但是看过得还是 mark 一下。
tailwind 更新的这些功能差不多都是以往需要插件支持或者直接写的。
话说被喷多之后貌似改进了旧版本浏览器兼容性噢,颜色不会一团浆糊了,有没有小伙伴升级测测看。
Tailwind CSS v4.1 发布:新增文本阴影、遮罩工具等多项功能
想了想还是加一个 #新动态 的 tag,虽然很多更新一般没时间看,但是看过得还是 mark 一下。
tailwind 更新的这些功能差不多都是以往需要插件支持或者直接写的。
话说被喷多之后貌似改进了旧版本浏览器兼容性噢,颜色不会一团浆糊了,有没有小伙伴升级测测看。
不幸的是,其中一些功能在较旧的浏览器中降级得非常糟糕,以至于对于使用卡在 Safari 15 上的旧 iPhone 或 iPad 访问的人来说,即使是颜色和阴影等基本内容也可能根本无法呈现。
For Tailwind CSS v4.1, we put a bunch of effort into coming up with and testing our own framework-specific fallbacks to make your sites render as best as possible in older browsers, even if some super modern things still don't behave quite the same.
对于 Tailwind CSS v4.1,我们投入了大量精力来提出和测试我们自己的特定于框架的回退,以使您的网站在较旧的浏览器中呈现得尽可能好,即使一些超级现代的东西仍然表现得不尽相同。
在 oklab 中定义的颜色现在可以在旧版本的 Safari 中呈现
Tailwind CSS v4.1 发布:新增文本阴影、遮罩工具等多项功能
AI 摘要:Tailwind CSS v4.1 引入了文本阴影、遮罩工具、浏览器兼容性优化等多项新功能,提升开发体验。
Tailwind CSS v4.1 是一个重要版本更新,新增了多项实用功能和优化。主要包括:
• 文本阴影工具(text-shadow-*):提供五种预设阴影大小,支持颜色和透明度调整。
• 遮罩工具(mask-*):支持使用图片或渐变遮罩元素,优化了 API 设计。
• 浏览器兼容性改进:在旧浏览器中更优雅地降级,同时充分利用现代浏览器特性。
• 精细文本换行(overflow-wrap):防止长单词破坏布局。
• 彩色投影支持(drop-shadow):新增彩色投影工具。
• 输入设备适配(pointer-* 和 any-pointer-*):针对触摸设备优化设计。
• 基线对齐(items-baseline-last 和 self-baseline-last):支持将 Flex/Grid 项目对齐到文本最后一行的基线。
• 安全对齐(safe):防止内容在空间不足时消失。
• 构建优化:支持忽略特定路径(@source not
)和强制包含工具类(@source inline(...)
)。
• 新变体:如 noscript、user-valid、inverted-colors 等。
文章还提供了升级指南,支持通过 npm 安装最新版本(CLI、Vite、PostCSS)。