文档博客案例Plus

Tailwind CSS v4.1：文本阴影、蒙版和更多功能

Adam Wathan
Dan Hollick

我曾经不确定这是否会发生，但我们做到了 —— 我们发布了一个包含 text-shadow 实用程序 的 Tailwind CSS 版本。

Tailwind CSS v4.1 来了，它包含了新的实用程序、变体和开发者体验改进，这将帮助您（或者您的 LLM，您这个懦夫）构建更好的交互式体验。

以下是此版本中我们加入的所有最佳内容

这就是所有很酷的功能，但在发行说明中还隐藏着一些其他小东西，您可能也想查看一下。

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

使用 Tailwind CLI
npm install tailwindcss@latest @tailwindcss/cli@latest
使用 Vite
npm install tailwindcss@latest @tailwindcss/vite@latest
使用 PostCSS
npm install tailwindcss@latest @tailwindcss/postcss@latest

新的 text-shadow-* 实用程序

在过去的至少六年里，我们一直在扬言要添加文本阴影，而今天它们终于来了。

我们已将五个文本阴影添加到默认主题中，从 text-shadow-2xs 到 text-shadow-lg。它们对于使标题在繁忙的背景中脱颖而出特别有用

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

<p class="text-shadow-2xs ...">The quick brown fox...</p>
<p class="text-shadow-xs ...">The quick brown fox...</p>
<p class="text-shadow-sm ...">The quick brown fox...</p>
<p class="text-shadow-md ...">The quick brown fox...</p>
<p class="text-shadow-lg ...">The quick brown fox...</p>

您可以使用 text-shadow-<color> 实用程序更改阴影的颜色。例如，您可以通过在深色文本上使用小的白色阴影来创建一种浮雕效果

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Book a demo</button>
<button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">See pricing</button>

如果您只想调整文本阴影的不透明度而不更改颜色，则可以直接在文本阴影大小实用程序（如 text-shadow-lg）上添加不透明度修饰符。

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

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

敏捷的棕色狐狸跳过懒惰的狗。

<p class="text-shadow-lg ...">The quick brown fox...</p>
<p class="text-shadow-lg/20 ...">The quick brown fox...</p>
<p class="text-shadow-lg/30 ...">The quick brown fox...</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">Speed</p>
    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Built for power users</p>
    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">
      Work faster than ever with our keyboard shortcuts
    </p>
  </div>
</div>

因为您可以使用任何 background-image 作为蒙版，所以逻辑上应该复制 bg-* 实用程序，以便它们共享相同的 API。这种方法的问题在于，您通常希望将多个蒙版组合在一起，而 bg-* 实用程序是不可组合的。

因此，我们创建了一组新的实用程序来处理 mask-image，这些实用程序是可组合的，并且是为蒙版用例专门构建的。例如，您可以使用 mask-b-from-<value> 和 mask-t-to-<value> 等实用程序将线性渐变蒙版添加到元素的单个侧面

mask-t-from-50%

mask-r-from-30%

mask-l-from-50% mask-l-to-90%

mask-b-from-20% mask-b-to-80%

<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 中全力以赴地采用了现代平台功能，以尽可能地构建最佳框架，并使此版本具有尽可能长的保质期。

不幸的是，其中一些功能在旧浏览器中的降级效果非常差，甚至对于来自旧 iPhone 或 iPad 的用户（他们停留在 Safari 15 上）来说，颜色和阴影等基本内容也可能根本无法呈现。

对于 Tailwind CSS v4.1，我们投入了大量精力来提出和测试我们自己的框架特定回退，以使您的网站在旧浏览器中尽可能好地呈现，即使某些超现代的东西仍然不能完全相同地运行。

Comparison between how Tailwind CSS v4.0 (left) and Tailwind CSS v4.1 (right) render in Safari 15.5. Tailwind CSS v4.0 fails to render some background gradients that are now visible in Tailwind CSS v4.1

以下是我们在本版本中设法改进的内容列表

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

Tailwind CSS v4 仍然是为 Safari 16.4 及更高版本等现代浏览器设计的，并且仍然依赖于许多现代功能才能使一切都完美运行，但至少现在您的网站将在旧浏览器中呈现并且可用，即使在某些特定情况下，奇数的阴影颜色可能会有所不同。

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

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

新的 overflow-wrap 实用程序使您可以控制文本在元素内的换行方式。 wrap-break-word 实用程序对于可能破坏布局的长单词或 URL 特别有用

任何主要的英语词典中最长的单词是 pneumonoultramicroscopicsilicovolcanoconiosis，一个指的是因吸入非常细小的二氧化硅颗粒（特别是来自火山）而感染的肺部疾病的单词；医学上，它与矽肺病相同。

<p class="wrap-break-word">The longest word in any of the major...</p>

当这种情况在 flex 容器内时，它的行为并不完全符合您的预期，在这种情况下，您可能需要使用新的 wrap-anywhere 实用程序。

它类似于 wrap-break-word，但它允许在计算元素的固有大小时进行单词中间的换行，从而无需在子元素上设置 min-width: 0

wrap-break-word

Jay Riemenschneider

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Jay Riemenschneider

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">Jay Riemenschneider</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">Jay Riemenschneider</p>
    <p>jason.riemenschneider@vandelayindustries.com</p>
  </div>
</div>

除此之外没有太多其他内容，但是如果您想用稍微不同的措辞再次阅读，请参阅 overflow-wrap 文档。

彩色 drop-shadow 支持

在我们构建 text-shadow 支持时，我们认为不妨添加另一个我们从未着手实现的功能：彩色阴影。

现在您可以使用 drop-shadow-indigo-500 和 drop-shadow-cyan-500/50 等实用程序来更改阴影的颜色

drop-shadow-cyan-500/50

drop-shadow-sky-500/50

drop-shadow-indigo-500/50

<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 定位触摸屏等精度较低的设备

尝试在您的开发者工具中模拟触摸设备以查看更改

RAM
查看性能规格
<fieldset aria-label="Choose a memory option">
  <div class="flex items-center justify-between">
    <div>RAM</div>
    <a href="#"> See performance specs </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 实用程序正是为此而设计的

Spencer Sharp

在 Space Recruit 从事宇航员招募的未来工作。

spacerecruit.com
Alex Reed

一位跨学科设计师。

alex-reed.com
<div class="grid grid-cols-[1fr_auto] items-baseline-last">
  <div>
    <img src="img/spencer-sharp.jpg" />
    <h4>Spencer Sharp</h4>
    <p>Working on the future of astronaut recruitment at Space Recruit.</p>
  </div>
  <p>spacerecruit.com</p>
</div>

当您只需要对齐单个项目，而不是 flex 或 grid 容器中的所有项目时，我们还添加了 self-baseline-last。

使用 safe 对齐方式保持内容可见

曾经遇到过当容器变得太小时，居中对齐的内容在两个方向上溢出的情况吗？现在您不必使用容器查询来在不同大小下切换对齐方式。

当容器开始溢出时，新的 safe 对齐实用程序会将对齐方式更改为 start，因此它只会在一个方向上溢出。

调整容器大小以查看对齐行为

justify-center

  • 销售
  • 营销
  • SEO
  • 分析
  • 设计
  • 策略
  • 增长
  • 用户体验/用户界面

justify-center-safe

  • 销售
  • 营销
  • SEO
  • 分析
  • 设计
  • 策略
  • 增长
  • 用户体验/用户界面
justify-center
<ul class="flex justify-center gap-2 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>
justify-center-safe
<ul class="flex justify-center-safe gap-2 ...">
  <li>Sales</li>
  <li>Marketing</li>
  <li>SEO</li>
  <!-- ... -->
</ul>

这些实用程序适用于 flexbox 和 grid 布局，并且可用于所有对齐属性。

使用 @source not 忽略特定路径

有时您需要专门排除代码库的某些部分不被 Tailwind 扫描。现在您可以使用 @source not 在扫描类名时忽略特定路径

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

当您的项目中有大量文件，但只想扫描其中的特定子集时，这非常有用。

使用 @source inline(…) 安全列表特定实用程序

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

CSS
@import "tailwindcss";
@source inline("underline");
生成的 CSS
.underline {
  text-decoration: underline;
}

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

源输入是大括号展开的，因此您可以一次生成多个类。例如，要生成所有带有 hover 变体的红色阴影，您可以向源输入添加范围

CSS
@import "tailwindcss";
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
生成的 CSS
.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: 变体。

您还可以将 @source inline() 与 not 修饰符一起使用，以排除要生成的特定类

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

即使在您的源文件中检测到单词 container，这也将专门阻止生成 container 类。

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

大量其他新变体

使用 details-content 实现更漂亮的手风琴效果

虽然您始终可以向 <details> 元素的子元素添加样式，但一直无法为内容容器本身设置样式。

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

他们为什么称之为 Ovaltine？

杯子是圆的。罐子是圆的。他们应该称之为 Roundtine。

<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">
    Why do they call it Ovaltine?
  </summary>
  <div class="border-gray-200 bg-gray-50 py-3 pl-3 dark:border-white/10 dark:bg-gray-800/50 ...">
    <p>The mug is round. The jar is round. They should call it Roundtine.</p>
  </div>
</details>

定位 inverted-colors 模式

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

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

这对于防止在启用反转颜色时将黑色阴影变为白色等情况非常有用。

新的 noscript 变体

是的，有些人禁用 JavaScript，现在您可以告诉他们您的应用程序在没有 JavaScript 的情况下无法工作。 noscript 变体使您可以在禁用 JS 时有条件地应用样式

<div class="hidden noscript:block">Please enable JavaScript to use this app.</div>

您已经可以使用 <noscript> 标签来执行此操作，但现在您也可以使用 CSS 来执行此操作，Tailwind 允许您在 HTML 中编写 CSS，所以……是的。

使用 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 更新到最新版本，并立即开始使用它

使用 Tailwind CLI
npm install tailwindcss@latest @tailwindcss/cli@latest
使用 Vite
npm install tailwindcss@latest @tailwindcss/vite@latest
使用 PostCSS
npm install tailwindcss@latest @tailwindcss/postcss@latest

期待看到您使用新功能构建的内容！

将我们的所有更新直接发送到您的收件箱。
注册我们的新闻通讯。

版权所有 © 2025 Tailwind Labs Inc.·商标政策