Tailwind CSS v4.1：文本阴影、遮罩等更多功能

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

¥I wasn't sure it would ever happen but we did it — we released a version of Tailwind CSS that includes text-shadow utilities.

Tailwind CSS v4.1 现已发布，它包含许多新的实用程序、变体和开发者体验改进，可帮助你（或者你的大语言模型，你这个胆小鬼）构建更出色的交互式体验。

¥Tailwind CSS v4.1 is here and it's packed with new utilities, variants, and developer experience improvements that will help you (or your LLM, you coward) build even better interactive experiences.

以下是本次发布的所有精彩内容：

¥Here's all the best stuff we got into this release:

新的 text-shadow-* 实用程序 — 距离它们首次被浏览器支持仅过去了二十年。

¥New text-shadow-* utilities — only about twenty years after they were first supported by a browser.
使用 mask-* 实用程序遮罩元素 — 使用图片和渐变效果，通过全新的人体工学 API 遮罩元素。

¥Mask elements with the mask-* utilities — use images and gradients to mask elements with new ergonomic APIs.
改进了与旧版浏览器的兼容性 — 我们已使旧版浏览器的降级更加优雅，同时仍充分利用支持旧版浏览器的现代功能。

¥Improved compatibility with older browsers — we've made things degrade way more gracefully for older browsers, while still taking advantage of modern features in browsers that support them.
使用 overflow-wrap 进行细粒度文本换行 — 即使是用户抛出的最长的德语单词，也能保护布局的完整性。

¥Fine-grained text wrapping with overflow-wrap — defend the integrity of your layouts from even the longest German words your users will throw at you.
彩色 drop-shadow 支持 — 真的记不清为什么我们以前没有这些功能，但现在有了。

¥Colored drop-shadow support — can't really remember why we didn't have these before but we do now.
使用 pointer-* 和目标输入设备 any-pointer-* — 明确调整设计以适应触控设备，而非依赖视口大小。

¥Target input devices with pointer-* and any-pointer-* — tweak your design for touch devices explicitly instead of relying on viewport size.
将项目与最后一个基线对齐 — 使用新的 items-baseline-last 和 self-baseline-last 实用程序，将弹性或网格项目与最后一行文本的基线对齐。

¥Align items to the last baseline — align flex or grid items to the baseline of the last line of text using the new items-baseline-last and self-baseline-last utilities.
使用 safe 对齐保持内容可见 — 在弹性和网格布局中将内容居中，当空间不足时不会消失。

¥Keep content visible with safe alignment — center content in flex and grid layouts without it disappearing when there's not enough space.
使用 @source not 忽略特定路径 — 明确忽略不相关的大型目录，进一步加快构建速度。

¥Ignore specific paths with @source not — explicitly ignore irrelevant large directories and speed up your builds even more.
使用 @source inline(…) 将特定实用程序列入安全列表 — 强制 Tailwind 包含源文件中不存在的类。

¥Safelist specific utilities with @source inline(…) — force Tailwind to include classes that aren't in your source files.
一系列其他新变体 — 包括 noscript、user-valid、inverted-colors 等等。

¥A bunch of other new variants — including noscript, user-valid, inverted-colors, and more.

这些都是很酷的东西，但发行说明中还隐藏着一些其他的小功能，你可能也想看看。

¥That's all the cool stuff, but there's a few other little things hiding in the release notes that you might want to check out too.

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

¥Upgrade your projects by installing the latest version of tailwindcss from npm:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

新的 `text-shadow-` 实用程序(New `text-shadow-` utilities)

¥New text-shadow-* utilities

至少在过去六年里，我们一直计划添加文本阴影，今天终于实现了。

¥We've been threatening to add text shadows for at least the last six years and today they are finally here.

我们为默认主题添加了五种文本阴影，从 text-shadow-2xs 到 text-shadow-lg。它们对于使标题在复杂的背景中脱颖而出特别有用：

¥We've added five text shadows to the default theme, from text-shadow-2xs to text-shadow-lg. They are particularly useful for making headings stand out against a busy background:

The quick brown fox jumps over the lazy dog.

<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> 实用程序更改阴影的颜色。例如，你可以通过在深色文本上使用小白色阴影来创建一种浮雕效果：

¥You can change the color of the shadow using the text-shadow-<color> utilities. For instance, you can create a sort of embossed effect by using a small white shadow on dark text:

<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）上添加不透明度修改器。

¥If you just want to adjust the opacity of a text shadow without changing the color, you can slap an opacity modifier directly on text shadow size utilities like text-shadow-lg.

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

¥For example, text-shadow-lg/50 is the same as setting text-shadow-lg and text-shadow-black/50 at the same time:

The quick brown fox jumps over the lazy dog.

<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 文档了解更多详情。

¥Check out the text-shadow docs for more details.

使用 `mask-` 实用程序遮罩元素(Mask elements with the `mask-` utilities)

¥Mask elements with the mask-* utilities

现代 CSS 最酷的功能之一是能够使用图片和渐变作为蒙版。 - 基本上就是使用图片的不透明度来隐藏元素的某些部分：

¥One of the coolest features of modern CSS is the ability to use images and gradients as masks - basically using the opacity of an image to hide certain parts of an element:

因为你可以将任何 background-image 用作遮罩，所以合乎逻辑的做法是复制 bg-* 实用程序，以便它们共享相同的 API。这种方法的问题在于，你经常需要组合多个遮罩，而 bg-* 实用程序无法组合。

¥Because you can use any background-image as a mask, the logical thing to do was to copy the bg-* utilities so they share the same API. The problem with that approach is you often want to combine multiple masks together and the bg-* utilities are not composable.

因此，我们创建了一组新的实用程序来与 mask-image 配合使用，这些实用程序可组合，并且专为遮罩用例而构建。例如，你可以使用 mask-b-from-<value> 和 mask-t-to-<value> 等实用程序向元素的单侧添加线性渐变蒙版：

¥So instead, we created a new set of utilities to work with mask-image that are composable and purpose-built for the masking use case. For example, you can use utilities like mask-b-from-<value> and mask-t-to-<value> to add a linear gradient mask to a single side of an element:

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>

比起费力计算需要使用的确切渐变色，思考要遮盖哪一侧更为自然。

¥It's more natural to think about which side you want to mask, rather than trying to work out the exact gradient you need to use.

渐变蒙版实用程序也是可组合的，因此你可以将径向、圆锥和线性渐变组合在一起，以创建更复杂的蒙版：

¥The gradient mask utilities are also composable, so you can combine radial, conic and linear gradients together to create more complex masks:

<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 的功能远比我们在这里介绍的要多。如需了解新实用程序的完整详情，请查看 documentation。

¥Masking is a super powerful technique and there's a lot more to the API than we can cover here. For a full breakdown of the new utilities, check out the documentation.

改进了与旧版浏览器的兼容性(Improved compatibility with older browsers)

¥Improved compatibility with older browsers

我们全力以赴地利用 Tailwind CSS v4.0 的现代平台功能，打造出最好的框架，并尽可能延长此版本的使用寿命。

¥We went all-in on modern platform features with Tailwind CSS v4.0 to make the best framework we could, and give this version the longest shelf-life possible.

遗憾的是，其中一些功能在旧版浏览器中性能下降非常严重，甚至连颜色和阴影等基本功能对于使用 Safari 15 的旧版 iPhone 或 iPad 访问的用户都可能完全无法呈现。

¥Unfortunately some of those features degrade really poorly in older browsers, to the point where even basic things like colors and shadows might not render at all for someone visiting from an old iPhone or iPad that's stuck on Safari 15.

对于 Tailwind CSS v4.1，我们投入了大量精力来开发和测试我们自己框架特有的回退机制，以使你的网站在旧版浏览器中呈现最佳效果，即使一些非常现代的功能仍然表现不佳。

¥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.

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

以下是我们在此过程中设法改进的事项列表发布：

¥Here's a list of the things we've managed to improve in this release:

oklab 中定义的颜色现在可以在旧版 Safari 中渲染

¥Colors defined in oklab now render in older versions of Safari
依赖于 @property 定义的自定义属性的功能（例如阴影、变换、渐变等）现在可以在旧版本的 Safari 和 Firefox 中使用。

¥Features that depend on custom properties defined with @property (like shadows, transforms, gradients and more) now work in older versions of Safari and Firefox
使用不透明度修饰符的颜色现在可以在旧版浏览器中使用内联回退渲染

¥Colors using the opacity modifier now render with inlined fallbacks in older browsers
使用显式插值方法的渐变在不受支持时会回退到浏览器默认值。

¥Gradients using explicit interpolation methods fall back to the browser default when not supported

Tailwind CSS v4 仍然针对现代浏览器（例如 Safari 16.4 及更高版本）设计，并且仍然依赖于许多现代功能才能完美运行，但至少现在你的网站可以在旧版浏览器中渲染和使用，即使在某些特定情况下阴影颜色会有所不同。

¥Tailwind CSS v4 is still designed for modern browsers like Safari 16.4 and up and still depends on a lot of modern features for everything to work perfectly, but at least now your sites will render and be usable in older browsers, even if in certain specific situations the odd shadow color be different.

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

¥To learn everything you need to know about browser compatibility in Tailwind CSS v4, you can read the full browser compatibility documentation.

使用 `overflow-wrap` 进行细粒度文本换行(Fine-grained text wrapping with `overflow-wrap`)

¥Fine-grained text wrapping with overflow-wrap

新的 overflow-wrap 实用程序可让你控制文本在元素内的换行方式。wrap-break-word 实用程序对于长单词或 URL 尤其有用，否则可能会破坏你的布局：

¥The new overflow-wrap utilities let you control how text wraps within an element. The wrap-break-word utility is especially useful for long words or URLs that might otherwise break your layout:

The longest word in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.

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

有一种情况与你预期的不太一样，那就是在弹性容器内，这时你可能更想使用新的 wrap-anywhere 工具。

¥The one case where this doesn't quite behave like you'd expect is inside a flex container and that's where you probably want to use the new wrap-anywhere utility instead.

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

¥It's similar to wrap-break-word, but it allows mid-word line breaks when calculating the intrinsic size of the element, replacing the need to set min-width: 0 on the child element:

除此之外就没什么内容了，但如果你想用略有不同的措辞再次阅读，这里有 overflow-wrap 文档。

¥There's not much more to it than that, but here's the overflow-wrap documentation if you want to read it again in slightly different words.

彩色 `drop-shadow` 支持(Colored `drop-shadow` support)

¥Colored drop-shadow support

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

¥While we were building out text-shadow support we thought we might as well add another feature we never got around to implementing: colored drop shadows.

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

¥Now you can use utilities like drop-shadow-indigo-500 and drop-shadow-cyan-500/50 to change the color of a drop shadow:

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 文档还是来了。

¥There isn't much more to it but here's the drop-shadow documentation anyway.

使用 `pointer-` 和目标输入设备 `any-pointer-`(Target input devices with `pointer-` and `any-pointer-`)

¥Target input devices with pointer-* and any-pointer-*

新的 pointer-fine 和 pointer-coarse 变体允许你根据用户使用鼠标还是触摸屏设备来设置不同的样式。

¥The new pointer-fine and pointer-coarse variants let you style something differently depending on whether the user is using a device with a mouse or using a touchscreen.

使用 pointer-fine 来定位精确的指针设备，例如鼠标和触控板，使用 pointer-coarse 来定位精度较低的设备，例如触摸屏：

¥Use pointer-fine to target precise pointing devices like mouses and trackpads, and pointer-coarse to target devices lower precision like touchscreens:

尝试在开发者工具中模拟触摸设备以查看变化

<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 样式，这使得触摸目标更小、更精确。

¥If you're on your phone, you'll see the pointer-coarse styles applied, which make the touch targets larger and easier to hit. If you're on a desktop, you'll see the pointer-fine styles applied, which make the touch targets smaller and more precise.

any-pointer-* 变体的工作方式相同，但它们不仅检查用户的主要指针设备，还检查是否有任何指针设备匹配。例如，即使用户连接了鼠标，any-pointer-coarse 也能在带触摸屏的注意本电脑上正常运行。

¥The any-pointer-* variants work the same way but instead of just checking the user's primary pointing device, they check if any pointing device matches. So any-pointer-coarse will match on a laptop with a touchscreen for a example, even if the user also has a mouse connected.

将项目与最后一个基线对齐(Align items to the last baseline)

¥Align items to the last baseline

使用弹性或网格布局时，有时需要将某些内容与文本最后一行的基线对齐，而不是与容器的末尾对齐。

¥When working with flex or grid layouts, sometimes you need to align something to the baseline of the last line of text rather than the end of the container.

新的 items-baseline-last 实用程序就是这样做的：

¥The new items-baseline-last utility does just that:

我们还添加了 self-baseline-last，用于仅对齐单个项目，而不是 flex 或 grid 容器中的所有项目。

¥We've also added self-baseline-last for when you need to align just a single item, and not all items in the flex or grid container.

使用 `safe` 对齐保持内容可见(Keep content visible with `safe` alignment)

¥Keep content visible with safe alignment

当容器太小时，居中对齐的内容是否会向两个方向溢出？现在，你无需使用容器查询来切换不同大小的对齐方式。

¥Ever had center aligned content overflow in both directions when the container got too small? Now you don't have to use a container query to switch the alignment at different sizes.

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

¥The new safe alignment utilities will change the alignment to start when the container starts to overflow, so it only overflows in one direction.

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

justify-center

Sales
Marketing
SEO
Analytics
Design
Strategy
Growth
UX/UI

justify-center-safe

Sales
Marketing
SEO
Analytics
Design
Strategy
Growth
UX/UI

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 和网格布局，并且适用于所有对齐属性。

¥These utilities work with both flexbox and grid layouts, and are available for all alignment properties.

使用 `@source not` 忽略特定路径(Ignore specific paths with `@source not`)

¥Ignore specific paths with @source not

有时，你需要明确地将代码库的某些部分排除在 Tailwind 的扫描范围之外。现在，你可以使用 @source not 在扫描类名时忽略特定路径：

¥Sometimes you need to specifically exclude some parts of your code base from being scanned by Tailwind. Now you can use @source not to ignore specific paths when scanning for class names:

CSS

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

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

¥This is useful when you have a large number of files in your project, but only want to scan a specific subset of them.

使用 `@source inline(…)` 将特定实用程序列入安全列表(Safelist specific utilities with `@source inline(…)`)

¥Safelist specific utilities with @source inline(…)

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

¥If you need to make sure Tailwind generates certain class names that don’t exist in your content files, you can force them to be generated by using @source inline():

CSS

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

Generated CSS

.underline {
  text-decoration: underline;
}

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

¥This is the equivalent of the safelist configuration option in previous versions of Tailwind, but now you can use it in your CSS files instead of your config file.

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

¥The source input is brace-expanded, so you can generate multiple classes at once. For example, to generate all the red shades with hover variants, you can add a range to the source input:

CSS

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

Generated 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: 变体。

¥This will generate shades of red from 100 to 900 in increments of 100, as well as the 50 and 950 shades. It also adds the hover: variant for each of those classes.

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

¥You can also use @source inline() with the not modifier to exclude specific classes from being generated:

CSS

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

即使在源文件中检测到单词 container，这也将明确阻止生成 container 类。

¥This will specifically prevent the container class from being generated, even if the word container is detected in your source files.

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

¥For more details, check out the detecting classes in source files documentation.

一系列其他新变体(A bunch of other new variants)

¥A bunch of other new variants

使用 `details-content` 实现更美观的手风琴面板(Prettier accordions with `details-content`)

¥Prettier accordions with details-content

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

¥While you could always add styles to the children of a <details> element, it's been impossible to style the content container itself.

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

¥The new details-content variant targets the content container which is useful for positioning the content container relative to the <summary> element:

Why do they call it Ovaltine?

The mug is round. The jar is round. They should call it 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` 模式(Target `inverted-colors` mode)

¥Target inverted-colors mode

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

¥Use the inverted-colors variant to conditionally add styles when the user has enabled an inverted color scheme in their OS:

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

这对于防止启用反色时黑色阴影变成白色等情况很有用。

¥This is useful for things like preventing black shadows being turned white when inverted colors are enabled.

新的 `noscript` 变体(New `noscript` variant)

¥New noscript variant

是的，有些人会禁用 JavaScript，现在你可以告诉他们，如果没有 JavaScript，你的应用就无法运行。noscript 变体允许你在 JS 禁用时有条件地应用样式：

¥Yes, some people disable JavaScript and now you can tell them your app doesn't work without it. The noscript variant lets you conditionally apply styles when JS is disabled:

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

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

¥You could already do this with the <noscript> tag but now you can do it with CSS too, which Tailwind lets you write in your HTML, so… yeah.

更好的表单验证 `user-valid` 和 `user-invalid`(Better form validation with `user-valid` and `user-invalid`)

¥Better form validation with user-valid and user-invalid

你是否曾经尝试过 :invalid 伪类，结果页面在加载时就充满了红色的无效状态，甚至在用户触摸表单之前？

¥Ever tried the :invalid pseudo-class only for the page to be full of red invalid states as soon as it loads, before the user has even touched your form?

新的 user-valid 和 user-invalid 变体尝试通过仅在用户实际与控件交互后应用与验证相关的样式来解决这个问题：

¥The new user-valid and user-invalid variants try to solve this problem, by only applying validation-related styling after the user has actually interacted with the controls:

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

就是这样，这就是 Tailwind CSS v4.1！使用 npm 更新到最新版本并立即开始使用：

¥So that's it, that's Tailwind CSS v4.1! Update to the latest version using npm and start playing with it today:

Using the Tailwind CLI

npm install tailwindcss@latest @tailwindcss/cli@latest

Using Vite

npm install tailwindcss@latest @tailwindcss/vite@latest

Using PostCSS

npm install tailwindcss@latest @tailwindcss/postcss@latest

期待看到你用这些新功能构建出什么！

¥Looking forward to seeing what you build with the new features!