Tailwind CSS Blog
·
Tailwind CSS v4.1：文本阴影、遮罩及更多新功能
内容提要
Tailwind CSS v4.1发布，新增文本阴影工具，支持五种文本阴影及颜色和不透明度调整。改进了旧浏览器兼容性，增强文本换行和阴影颜色功能，优化布局对齐和样式条件应用。
关键要点
-
Tailwind CSS v4.1发布，新增文本阴影工具，支持五种文本阴影。
-
文本阴影工具可调整颜色和不透明度，增强文本可读性。
-
改进了旧浏览器兼容性，确保基本功能在老旧设备上正常显示。
-
新增overflow-wrap工具，控制文本在元素内的换行方式。
-
支持彩色阴影，允许用户自定义阴影颜色。
-
新增pointer-fine和pointer-coarse变体，根据设备类型调整样式。
-
引入items-baseline-last工具，支持对齐最后一行文本基线。
-
新增安全对齐工具，避免内容在容器过小时双向溢出。
-
允许使用@source指令排除特定路径的类名扫描。
-
新增details-content变体，支持样式化<details>元素的内容容器。
-
引入inverted-colors变体，根据用户的颜色反转设置调整样式。
-
新增noscript变体，允许在JavaScript禁用时应用样式。
-
user-valid和user-invalid变体在用户交互后应用验证样式。
延伸问答
Tailwind CSS v4.1新增了哪些主要功能？
Tailwind CSS v4.1新增了文本阴影工具、改进的旧浏览器兼容性、新的overflow-wrap工具、彩色阴影、pointer-fine和pointer-coarse变体等。
如何使用Tailwind CSS v4.1的文本阴影工具？
可以使用五种文本阴影类，如text-shadow-2xs到text-shadow-lg，并可调整阴影颜色和不透明度。
Tailwind CSS v4.1如何改善旧浏览器的兼容性？
该版本通过提供框架特定的回退方案，确保在旧版Safari和Firefox中正常渲染颜色、阴影和渐变等基本功能。
什么是overflow-wrap工具，它的作用是什么？
overflow-wrap工具用于控制文本在元素内的换行方式，特别适合处理长单词或URL。
Tailwind CSS v4.1中如何使用彩色阴影？
可以使用如drop-shadow-indigo-500和drop-shadow-cyan-500/50等类来改变阴影的颜色。
Tailwind CSS v4.1中新增的pointer-fine和pointer-coarse变体有什么用？
这些变体允许根据用户使用的设备类型（精确指针或触摸屏）应用不同的样式。
