Tailwind CSS v4.1: 文本阴影、遮罩及更多

我曾不知道这是否会发生，但我们做到了——我们发布了一个包含 text-shadow 工具的 Tailwind CSS 版本。

Tailwind CSS v4.1 在这里，它充满了新的工具、变体和开发者体验的改善，将帮助你 (或者你的 LLM，你这个懦夫) 构建更好的交互体验。

以下是我们在此次发布中加入的所有精彩内容：

• 新的 text-shadow-* 工具——大约在浏览器首次支持它们后过了二十年。
• 使用 mask-* 工具来遮罩元素——使用图像和渐变结合新的人体工学 API 遮罩元素。
• 提高与旧浏览器的兼容性——我们让旧浏览器降级更加优雅，同时在支持它们的现代浏览器中依旧利用现代特性。
• 细粒度文本换行使用 overflow-wrap——保护你的布局不受到用户抛出的一切德语长词的威胁。
• 支持带颜色的 drop-shadow——不太记得我们之前为什么没有这些了，但我们现在有了。
• 通过 pointer-* 和 any-pointer-* 目标输入设备——显式地为触摸设备调整设计，而不是依赖视口大小。
• 将项目对齐到最后基线——使用新的 items-baseline-last 和 self-baseline-last 工具将flex或grid项目对齐到最后一行文字的基线。
• 使用 safe 对齐保持内容可见——在flex和grid布局中居中内容，而不在空间不足时消失。
• 通过 @source not 忽略特定路径——明确忽略不相关的大目录，使你的构建速度更快。
• 使用 @source inline(…) 安全列出特定工具——强制 Tailwind 包括不在你的源文件中的类。
• 一系列其他新变体——包括 noscript、user-valid、inverted-colors 等等。

以上就是所有酷炫的内容，不过在发布说明中还有一些其他小功能，你也许想查看一下。

通过从 npm 安装 tailwindcss 的最新版本来升级你的项目：

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

新的 text-shadow-* 工具

我们至少威胁了六年要添加文本阴影，而今天它们终于来了。

我们在默认主题中添加了五个文本阴影，从 text-shadow-2xs 到 text-shadow-lg。它们在使标题在繁忙背景中突出来时特别有用：

<p class="text-shadow-2xs ...">快速的棕色狐狸...</p><p class="text-shadow-xs ...">快速的棕色狐狸...</p><p class="text-shadow-sm ...">快速的棕色狐狸...</p><p class="text-shadow-md ...">快速的棕色狐狸...</p><p class="text-shadow-lg ...">快速的棕色狐狸...</p>

你可以使用 text-shadow-<color> 工具改变阴影的颜色。例如，使用小的白色阴影在深色文本上创建一种浮雕效果：

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">预定演示</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">查看定价</button>

如果你只想调整文本阴影的透明度而不改变颜色，可以直接在文本阴影大小工具上添加透明度修饰符，如 text-shadow-lg。

例如，text-shadow-lg/50 与同时设置 text-shadow-lg 和 text-shadow-black/50 是相同的：

<p class="text-shadow-lg ...">快速的棕色狐狸...</p><p class="text-shadow-lg/20 ...">快速的棕色狐狸...</p><p class="text-shadow-lg/30 ...">快速的棕色狐狸...</p>

查看 text-shadow 文档以获取更多详细信息。

使用 mask-* 工具来遮罩元素

现代 CSS 最酷的特性之一是能够使用图像和渐变作为遮罩——基本上使用图像的不透明度来隐藏元素的某些部分：

速度

为高级用户构建

使用我们的键盘快捷键提升工作速度

<div class="mx-auto flex items-center p-16 max-sm:p-8">  <img    src="/img/keyboard.png"    class="mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-55% mask-radial-at-right ..."  />  <div class="font-medium">    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">速度</p>    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">为高级用户构建</p>    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">      使用我们的键盘快捷键提升工作速度    </p>  </div></div>

因为你可以使用任何 background-image 作为遮罩，所以逻辑上复制 bg-* 工具，让它们共享相同的 API。不过这个方法的问题是你通常想将多个遮罩组合在一起，而 bg-* 工具是不可组合的。

所以，我们创建了一组新的工具来配合 mask-image，这些工具是可组合的，并且专为遮罩用例而设计。例如，你可以使用像 mask-b-from-<value> 和 mask-t-to-<value> 的工具为元素的单侧添加线性渐变遮罩：

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

考虑到你想要遮罩哪一边而不是计算你需要的精确渐变，这样的思考更加自然。

渐变遮罩工具也是可组合的，因此你可以结合径向、圆锥和线性渐变，创造出更复杂的遮罩：

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

遮罩是一项非常强大的技术，API 还有更多内容我们无法在这里涉及。有关新工具的完整介绍，请查看 文档。

提高与旧浏览器的兼容性

我们在 Tailwind CSS v4.0 中全力以赴地使用现代平台特性，来制作我们能做到最好的框架，并确保这个版本有尽可能长的使用寿命。

不幸的是，这些特性在旧浏览器中会降级得相当糟糕，以至于即使是基本的东西，比如颜色和阴影，也可能根本不会被 Safari 15 的老 iPhone 或 iPad 渲染。

对于 Tailwind CSS v4.1，我们投入了大量精力来提出和测试我们自己特定于框架的回退方案，以便让你的网站在旧浏览器中尽可能好地渲染，即使某些超级现代的东西在某些情况仍然表现得不是很一样。

以下是我们在此次发布中所改善的一些内容：

• 在旧版本的 Safari 中现在可以渲染以 oklab 定义的颜色
• 依赖通过 @property 定义的自定义属性的特性（如阴影、变换、渐变等）现在在旧版本的 Safari 和 Firefox 中工作
• 使用透明度修饰符的颜色现在在旧浏览器中渲染为内联回退
• 使用显式插值方法的渐变在不支持时回退到浏览器默认值

Tailwind CSS v4 仍然是为现代浏览器（如 Safari 16.4 及以上）设计的，仍然依赖许多现代特性以确保一切顺利工作，但至少现在你的站点会在旧浏览器中渲染和可用，即使在某些特定情况下，奇怪的阴影颜色也可能会有所不同。

要了解关于 Tailwind CSS v4 的浏览器兼容性所需了解的所有信息，你可以阅读完整的 浏览器兼容性文档。

使用 overflow-wrap 进行细粒度文本换行

新的 overflow-wrap 工具让你可以控制文本在元素内部如何换行。wrap-break-word 工具对于长单词或 URL 特别有用，否则可能会破坏你的布局：

<p class="wrap-break-word">任何主要英语语言词典中最长的单词是...</p>

在 flex 容器内，这种情况表现得有点不同，你可能需要使用新的 wrap-anywhere 工具。

它类似于 wrap-break-word，但允许在计算元素的固有大小时进行单词中断，替代在子元素上设置 min-width: 0 的需要：

wrap-break-word

杰伊·瑞门施耐德

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

杰伊·瑞门施耐德

jason.riemenschneider@vandelayindustries.com

<div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-break-word">    <p class="font-medium">杰伊·瑞门施耐德</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div><div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-anywhere">    <p class="font-medium">杰伊·瑞门施耐德</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div>

就是这些，如果你想用稍微不同的词语再次阅读，可以查看 overflow-wrap 文档。

支持带颜色的 drop-shadow

在构建 text-shadow 支持时，我们想，既然可以添加另一项我们从未实现的功能：带颜色的 drop shadows。

现在你可以使用像 drop-shadow-indigo-500 和 drop-shadow-cyan-500/50 这样的工具改变 drop shadow 的颜色：

<svg class="fill-cyan-500 drop-shadow-xl drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-blue-500 drop-shadow-xl drop-shadow-blue-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-xl drop-shadow-indigo-500/50 ...">...</svg>

没有更多但是请查看 drop-shadow 文档。

通过 pointer-* 和 any-pointer-* 目标输入设备

新的 pointer-fine 和 pointer-coarse 变体使你能够根据用户使用的设备（鼠标或触摸屏）以不同的样式进行样式设置。

使用 pointer-fine 目标精确指向设备（如鼠标和触控板），并使用 pointer-coarse 目标低精度设备（如触摸屏）：

<fieldset aria-label="选择内存选项">  <div class="flex items-center justify-between">    <div>RAM</div>    <a href="#"> 查看性能规格 </a>  </div>  <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">    <label class="p-2 pointer-coarse:p-4 ...">      <input type="radio" name="memory-option" value="4 GB" className="sr-only" />      <span>4 GB</span>    </label>    <!-- ... -->  </div></fieldset>

如果你在手机上，你会看到应用了 pointer-coarse 样式，这使得触控目标变得更大，更容易点击。如果你在桌面上，你会看到应用了 pointer-fine 样式，这使得触控目标变得更小，更精确。

any-pointer-* 变体同样工作，但不是只检查用户的 主要 指针设备，而是检查 任何 指针设备是否匹配。因此，any-pointer-coarse 将在带有触摸屏的笔记本电脑上匹配，即使用户还连接了鼠标。

将项目对齐到最后基线

在处理 flex 或 grid 布局时，有时你需要将某些内容对齐到最后一行文本的基线，而不是容器的末尾。

新的 items-baseline-last 工具正是用来做到这一点的：

斯宾塞·夏普

为太空招聘的未来而工作。

spacerecruit.com

亚历克斯·里德

一位多学科设计师。

alex-reed.com

<div class="grid grid-cols-[1fr_auto] items-baseline-last">  <div>    <img src="img/spencer-sharp.jpg" />    <h4>斯宾塞·夏普</h4>    <p>为太空招聘的未来而工作。</p>  </div>  <p>spacerecruit.com</p></div>

我们还为你需要对齐单个项目而非所有项目的情况添加了 self-baseline-last。

使用 safe 对齐保持内容可见

你是否曾经历中间居中的内容在容器变得太小时在两个方向上溢出？现在你不需要使用容器查询来在不同大小时切换对齐方式。

新的 safe 对齐工具将在容器开始溢出时将对齐方式更改为 start，因此它只在一个方向上溢出。

<ul class="flex justify-center gap-2 ...">  <li>销售</li>  <li>市场营销</li>  <li>SEO</li>  <!-- ... --></ul>

<ul class="flex justify-center-safe gap-2 ...">  <li>销售</li>  <li>市场营销</li>  <li>SEO</li>  <!-- ... --></ul>

这些工具适用于 flexbox 和 grid 布局，并且也适用于所有对齐属性。

忽略特定路径的 @source not

有时你需要明确排除代码库中的某些部分，在扫描类名时可以使用 @source not 来忽略特定路径：

@import "tailwindcss";@source not "./src/components/legacy";

这在你的项目中有大量文件，但只想扫描它们的特定子集时非常有用。

使用 @source inline(…) 安全列出特定工具

如果你需要确保 Tailwind 生成某些类名，但它们在你的内容文件中不存在，可以使用 @source inline() 强制它们被生成：

@import "tailwindcss";@source inline("underline");

.underline {  text-decoration: underline;}

这等同于 Tailwind 先前版本中的 safelist 配置选项，但现在你可以在 CSS 文件中使用它，而不是在配置文件中。

源输入是 brace-expanded，因此你可以一次生成多个类。例如，要生成所有红色阴影及其悬停变体，可以将范围添加到源输入：

@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}/* ... */.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\:bg-red-50:hover {    background-color: var(--color-red-50);  }  /* ... */  .hover\:bg-red-950:hover {    background-color: var(--color-red-950);  }}

这将生成从 100 到 900 每 100 递增一次的红色阴影，同时生成 50 和 950 阴影。它还为每个类添加了 hover: 变体。

你还可以使用带 not 修饰符的 @source inline() 排除特定类的生成：

@import "tailwindcss";@source not inline("container");

这将明确防止 container 类的生成，即使在你的源文件中检测到“container”这个词。

想了解更多详细信息，请查看 在源文件中检测类 文档。

其他一些新变体

使用 details-content 美化手风琴

虽然你可以随时为 <details> 元素的子元素添加样式，但一直无法对内容容器本身进行样式固定。

新的 details-content 变体针对内容容器，这对于将内容容器相对于 <summary> 元素进行定位非常有用：

<details class="rounded-lg border border-transparent p-6 details-content:mt-3 details-content:-ml-0.5" open>  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white">    为什么叫它 Ovaltine？  </summary>  <div class="border-gray-200 bg-gray-50 py-3 pl-3 dark:border-white/10 dark:bg-gray-800/50 ...">    <p>杯子是圆的。罐子是圆的。他们应该称之为 Roundtine。</p>  </div></details>

目标 inverted-colors 模式

使用 inverted-colors 变体，以便在用户启用其操作系统中的反转颜色方案时条件性地添加样式：

<div class="shadow-xl inverted-colors:shadow-none ...">  <!-- ... --></div>

这对于避免在反转颜色启用时将黑色阴影变为白色等场景非常有用。

新的 noscript 变体

是的，有些人禁用 JavaScript 现在你可以告知他们你的应用在没有它时无法工作。noscript 变体使你能够在 JavaScript 被禁用时条件性地应用样式：

<div class="hidden noscript:block">请启用 JavaScript 以使用此应用程序。</div>

你已经可以使用 <noscript> 标签来做到这一点，但现在你也可以用 CSS 实现，这使 Tailwind 可以让你在 HTML 中编写，所以……没错。

更好的表单验证通过 user-valid 和 user-invalid

曾尝试过 :invalid 伪类，结果发现页面在加载时颜色全都变成了红色无效状态，用户连表单都没有接触？

新的 user-valid 和 user-invalid 变体试图解决这个问题，仅在用户实际与控件互动后，才应用与验证相关的样式：

<input required class="border user-valid:border-green-500" /><input required class="border user-invalid:border-red-500" />

就是这样，Tailwind CSS v4.1！通过 npm 更新到最新版本，今天就开始尝试它吧：

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

期待看到你用新特性构建的内容！