Tailwind CSS v4.3：滚动条、新颜色等等

Tailwind CSS v4.3 来了，而且显然发布 v4.2 比记得写博客要容易得多，所以这篇文章实际上是在悄悄介绍两个版本的新内容。

🌐 Tailwind CSS v4.3 is here, and because apparently shipping v4.2 was easier than remembering to blog about it, this post is secretly about two releases worth of new stuff.

这就是在 v4.2 中推出的内容：

🌐 Here's what landed in v4.2:

• 新的 mauve、olive、mist 和 taupe 调色板 —— 当灰色、锌色、中性色、石色和板岩色 somehow 不能满足你的需求时，又提供了四个更中性的调色板。
• 一流的 webpack 插件 — 在像 Next.js 这样的框架中带来巨大的性能提升。
• 更多逻辑属性工具 — 包括 pbs-*、mbs-*、inline-*、block-* 以及新的逻辑内嵌工具。
• 新的 font-features-* 工具 — 在不每次编写自定义 CSS 的情况下控制低级 OpenType 功能。

……以下是 v4.3 的新内容：

• 新的滚动条工具 — 样式化滚动条，而不用担心本周应该使用哪个半支持的浏览器 API。
• 新的 @container-size 工具 — 当你的容器查询也需要关注高度时，创建尺寸容器。
• 新的 zoom-* 工具 — 现在每个浏览器都终于认可它的存在，你可以直接在标记中使用 CSS zoom 属性。
• 新的 tab-* 工具 — 控制制表符的显示宽度，只是请不要像 GitHub 以前那样设置为八个。
• 堆叠 + 复合 @variant 支持 — 直接在 CSS 中使用堆叠和复合变体。
• 功能工具的默认值 — 定义可以有值或无值使用的工具。

v4.2 的许多改进，包括新的逻辑属性工具和 font-features-* 支持，都是通过我们与 Netflix 和 Vercel 团队在我们的 合作伙伴计划 中的合作而实现的。如果有类似这样的框架改进能够让 Tailwind CSS 对你的团队更有用，我们非常乐意提供帮助。

🌐 A lot of the v4.2 improvements, including the new logical property utilities and font-features-* support, came out of collaborations with teams at Netflix and Vercel through our Partners Program. If there are framework improvements like this that would make Tailwind CSS work better for your team, we'd love to help.

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

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

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

新的 mauve、olive、mist 和 taupe 调色板(New mauve, olive, mist, and taupe palettes)

在 v4.2 中，我们在默认主题中添加了四个新的颜色调色板：mauve、olive、mist 和 taupe。

🌐 In v4.2 we added four new color palettes to the default theme: mauve, olive, mist, and taupe.

这些最初来自于 Oatmeal，这是我们在去年十二月为 Tailwind Plus 发布的多主题营销网站套件，当时我们需要一些更中性的调色板，同时仍然与我们已经提供的灰色调有所区分。

🌐 These originally came out of Oatmeal, the multi-theme marketing site kit we released for Tailwind Plus back in December, where we needed a few more neutral-ish palettes that still felt distinct from the grays we already ship.

它们都属于那种实用的接近中性类别，你会想要一些看起来仍然像灰色，但又多了一点个性的东西：

🌐 They're all in that useful neutral-adjacent category where you want something that still behaves like gray, but has a little more personality:

当你希望整个设计偏向稍微暖一些、冷一些、偏绿一些，或者……偏紫褐色时，它们是现有灰色调的一个不错替代。

🌐 They're a nice substitute for the existing gray palettes when you want the whole design to lean a little warmer, cooler, greener, or… mauver?

<div class="bg-mauve-950 text-mauve-100 ...">Mauve</div><div class="bg-olive-100 text-olive-950 ...">Olive</div><div class="border border-mist-200 shadow-taupe-950/10 ...">Mist and taupe</div>

查看 colors 文档 以获取所有可用颜色的漂亮网格。

🌐 Check out the colors documentation for a pretty grid of all the available colors.

一流的 webpack 插件(First-class webpack plugin)

Tailwind CSS v4.2 为在 webpack 项目中集成 Tailwind CSS 添加了专用的 @tailwindcss/webpack 加载器。

🌐 Tailwind CSS v4.2 added a dedicated @tailwindcss/webpack loader for integrating Tailwind CSS in webpack projects.

在此之前，webpack 项目通常通过 postcss-loader 和 @tailwindcss/postcss 运行 Tailwind，这种方法可以使用，但意味着 CSS 必须经过 PostCSS 一小段迂回路径，仅仅是为了让 Tailwind 获取它已经知道如何编译的字符串。

🌐 Before this, webpack projects usually ran Tailwind through postcss-loader and @tailwindcss/postcss, which works, but means CSS has to take a little detour through PostCSS just so Tailwind can get its hands on a string it already knows how to compile.

专用加载器跳过了那些额外的工作，我们已经看到它在大型、复杂的 webpack 项目中使 Tailwind 的速度提升了超过 2 倍。例如，这是我们在使用 Next.js 和 Turbopack 测试 tailwindcss.com 文档时看到的情况：

🌐 The dedicated loader skips that extra work, and we've seen it make Tailwind over 2x faster in large, complicated webpack projects. For example, here's what we saw testing against the tailwindcss.com docs with Next.js and Turbopack:

使用它的方式和你习惯的其他 webpack 加载器的设置相同：

🌐 Using it is the same sort of setup you're used to from other webpack loaders:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  plugins: [new MiniCssExtractPlugin()],  module: {    rules: [      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],      },    ],  },};

由于 Turbopack 通过其兼容层支持 webpack 加载器，这些改进也同样适用于那里，这对于像 Next.js 这样 Turbopack 正逐渐成为默认选项的框架来说是件大事。

🌐 Because Turbopack supports webpack loaders through its compatibility layer, these improvements carry over there too, which is a big deal for frameworks like Next.js where Turbopack is becoming the default.

查看 @tailwindcss/webpack README 了解更多详情。

🌐 Check out the @tailwindcss/webpack README for more details.

更合逻辑的属性工具(More logical property utilities)

Tailwind CSS v4.2 添加了大量新的逻辑属性工具，使构建能够在不同书写模式和方向下正确适应的布局变得更容易。

🌐 Tailwind CSS v4.2 added a whole bunch of new logical property utilities, making it easier to build layouts that adapt correctly across different writing modes and directions.

在间距方面，有用于内边距、外边距、滚动内边距、滚动外边距和边框的新块开始和块结束工具：

🌐 For spacing, there are new block-start and block-end utilities for padding, margin, scroll padding, scroll margin, and borders:

<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">  <!-- ... --></div>

<div class="scroll-mbs-4 scroll-mbe-4 scroll-pbs-12 scroll-pbe-12 ...">  <!-- ... --></div>

<div class="border-bs border-be-2 ...">  <!-- ... --></div>

我们还为 inline-size 和 block-size 添加了逻辑尺寸实用工具，以及最小值和最大值变体：

🌐 We've also added logical sizing utilities for inline-size and block-size, along with min and max variants:

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ...">  <!-- ... --></div>

我们已经添加了用于定位元素的逻辑内置实用工具：

🌐 And we've added logical inset utilities for positioning elements:

<div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ...">  <!-- ... --></div>

现有的 start-* 和 end-* 工具仍然可用，但它们现在已经被弃用，建议使用 inset-s-* 和 inset-e-*，以便整个 API 与 inset-bs-* 和 inset-be-* 保持一致。

🌐 The existing start-* and end-* utilities are still available, but they're now deprecated in favor of inset-s-* and inset-e-* so the whole API lines up with inset-bs-* and inset-be-*.

查看更多详情，请查阅 padding、margin、scroll-padding、scroll-margin、border-width、inline-size、block-size 和 top / right / bottom / left 文档。

🌐 Check out the padding, margin, scroll-padding, scroll-margin, border-width, inline-size, block-size, and top / right / bottom / left docs for more details.

新的 font-features-* 工具(New font-features-* utility)

我们还添加了用于控制 font-feature-settings 的 font-features-* 工具：

🌐 We've also added font-features-* utilities for controlling font-feature-settings:

<div class='font-features-["tnum"] ...'>  <!-- ... --></div>

对于像表格式数字这样的常见情况，你仍然应该首先使用像 tabular-nums 这样的高级工具，因为没有人应该记住 "tnum" 是存在的。

🌐 For common cases like tabular numbers, you should still reach for higher-level utilities like tabular-nums first, because nobody should have to remember that "tnum" is a thing.

但是当你需要启用特定字体的风格集或其他我们没有专用工具的 OpenType 功能时，font-features-* 为你提供了一个干净的应急方法。

🌐 But when you need to enable a font-specific stylistic set or some other OpenType feature we don't have a dedicated utility for, font-features-* gives you a clean escape hatch.

查看 font-feature-settings 文档以获取更多详细信息。

🌐 Check out the font-feature-settings docs for more details.

新的滚动条工具(New scrollbar utilities)

Tailwind CSS v4.3 为 CSS 滚动条 API 添加了官方实用工具，因此你终于可以在不打开第二个标签页并记住哪个浏览器支持什么的情况下，完成那些无聊但有用的滚动条操作。

🌐 Tailwind CSS v4.3 adds first-party utilities for the CSS scrollbar APIs, so you can finally do the boring-but-useful scrollbar stuff without opening a second tab and remembering which browser supports what.

使用 scrollbar-auto、scrollbar-thin 和 scrollbar-none 来控制 scrollbar-width：

🌐 Use scrollbar-auto, scrollbar-thin, and scrollbar-none to control scrollbar-width:

<div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

你也可以使用 scrollbar-thumb-* 和 scrollbar-track-* 工具控制滚动条颜色：

🌐 You can also control scrollbar colors using scrollbar-thumb-* and scrollbar-track-* utilities:

<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

它们也适用于常用的颜色不透明度修饰符：

🌐 They work with the usual color opacity modifiers too:

<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">  <!-- ... --></div>

为了在滚动条出现时防止布局偏移，我们添加了 scrollbar-gutter-auto、scrollbar-gutter-stable 和 scrollbar-gutter-both：

🌐 And for preventing layout shift when scrollbars appear, we've added scrollbar-gutter-auto, scrollbar-gutter-stable, and scrollbar-gutter-both:

<div class="scrollbar-gutter-stable overflow-auto ...">  <!-- ... --></div>

查看 scrollbar-width、scrollbar-color 和 scrollbar-gutter 文档以获取更多详情。

🌐 Check out the scrollbar-width, scrollbar-color, and scrollbar-gutter docs for more details.

新的 @container-size 工具(New @container-size utility)

在 Tailwind CSS v4.0 中，我们通过 @container 工具添加了原生容器查询支持，该工具创建了一个内联尺寸容器。

🌐 In Tailwind CSS v4.0 we added first-party container query support with the @container utility, which creates an inline-size container.

大多数时候你想要的就是这样，但像 cqb 和 cqh 这样的容器查询长度单位依赖于容器的块大小，而行内尺寸的容器不会暴露该信息。

🌐 That's what you want most of the time, but container query length units like cqb and cqh depend on the block size of the container, and inline-size containers don't expose that information.

所以在 v4.3 中，我们添加了 @container-size，它创建了一个尺寸容器：

🌐 So in v4.3 we've added @container-size, which creates a size container instead:

<div class="@container-size">  <div class="h-[50cqb]">    <!-- ... -->  </div></div>

你也可以使用 @container-size/{name} 给尺寸容器命名，就像 @container/{name} 一样。

🌐 You can name size containers too using @container-size/{name}, just like @container/{name}.

查看响应式设计文档以获取更多详细信息。

🌐 Check out the responsive design docs for more details.

新的 zoom-* 工具(New zoom-* utilities)

Tailwind CSS v4.3 为 CSS zoom 属性添加了 zoom-* 工具类，这是一个古老的浏览器特性，早在 2008 年 Chrome 1 就支持，但直到 2024 年经过一些长期存在的 SVG Bug 问题后，才在所有主流浏览器中得到全面支持：

🌐 Tailwind CSS v4.3 adds zoom-* utilities for the CSS zoom property, one of those ancient browser features that was supported in Chrome 1 back in 2008, but only became fully supported across all major browsers in 2024 after taking the scenic route through a few long-standing SVG bugs:

<div class="zoom-75 ...">Zoomed out</div><div class="zoom-100 ...">Normal</div><div class="zoom-125 ...">Zoomed in</div>

你也可以使用任意值和 CSS 变量：

🌐 You can also use arbitrary values and CSS variables:

<div class="zoom-[1.1] ...">Zoomed in a little</div><div class="zoom-(--preview-zoom) ...">Zoomed using a variable</div>

查看 zoom 文档以获取更多详细信息。

🌐 Check out the zoom docs for more details.

新的 tab-* 工具(New tab-* utilities)

我们还添加了 tab-* 工具来使用 tab-size 控制制表符的渲染宽度。

🌐 We've also added tab-* utilities for controlling the rendered width of tab characters using tab-size.

这主要适用于代码示例、编辑器以及任何其他渲染可能包含真实制表符的预格式文本的用户界面：

🌐 This is mostly useful for code examples, editors, and any other UI where you're rendering preformatted text that might contain real tab characters:

function indent() {	return 'tabbed';}

function indent() {	return 'tabbed';}

<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre><pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>

任意值和 CSS 变量在这里也可以使用：

🌐 Arbitrary values and CSS variables work here too:

<pre class="tab-[12px] ...">...</pre><pre class="tab-(--tab-size) ...">...</pre>

查看 tab-size 文档以获取更多详细信息。

🌐 Check out the tab-size docs for more details.

堆叠 + 复合 @variant 支持(Stacked + compound @variant support)

Tailwind CSS v4.3 在你使用 CSS 中的变体而不是直接在标记中使用时，使 @variant 更加灵活。

🌐 Tailwind CSS v4.3 makes @variant more flexible when you're using variants in CSS instead of directly in your markup.

你现在可以使用堆叠变体：

🌐 You can now use stacked variants:

.button {  background: var(--color-sky-500);  @variant hover:focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      &:focus {        background: var(--color-sky-600);      }    }  }}

你可以使用复合变体在多个变体之间共享同一块 CSS：

🌐 And you can use compound variants to share the same block of CSS across multiple variants:

.button {  background: var(--color-sky-500);  @variant hover, focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      background: var(--color-sky-600);    }  }  &:focus {    background: var(--color-sky-600);  }}

通常情况下，你最好直接创建一个真实的组件并用 Tailwind CSS 类来进行样式，但当 CSS 是合适的工具时，这会使 @variant 的使用体验更好。

🌐 You're usually better off creating a real component and styling it with Tailwind CSS classes directly, but when CSS is the right tool, this makes @variant a lot nicer to work with.

查看 @variant 文档以获取更多详细信息。

🌐 Check out the @variant docs for more details.

函数工具的默认值(Default values for functional utilities)

Tailwind CSS v4.0 引入了函数式 @utility 定义，其中你可以使用 --value(…) 和 --modifier(…) 来定义接受主题值、裸值、任意值以及修饰符的工具类。

🌐 Tailwind CSS v4.0 introduced functional @utility definitions, where you can use --value(…) and --modifier(…) to define utilities that accept theme values, bare values, arbitrary values, and modifiers.

在 v4.3 中，当一个工具应当可以有值或无值地工作时，你现在可以将 --default(…) 传递给 --value(…) 和 --modifier(…)：

🌐 In v4.3, you can now pass --default(…) to --value(…) and --modifier(…) when a utility should work with or without a value:

@utility tab-* {  tab-size: --value(integer, --default(4));}

现在，裸露的 tab 工具可以回退到 4，而 tab-2 仍然解析为 2：

🌐 Now the bare tab utility can fall back to 4, while tab-2 still resolves to 2:

<pre class="tab ...">...</pre><pre class="tab-2 ...">...</pre>

.tab {  tab-size: 4;}.tab-2 {  tab-size: 2;}

这使得定义 API 更加容易，其中基础工具执行显而易见的操作，同时仍然支持同一工具系列的显式值。

🌐 That makes it easier to define APIs where the bare utility does the obvious thing, while still supporting explicit values for the same utility family.

这是一件小事，但它让插件作者和任何编写自定义工具的人能够创建感觉更像我们在框架本身中提供的 API。

🌐 It's a small thing, but it lets plugin authors and anyone writing custom utilities create APIs that feel a lot more like the ones we ship in the framework itself.

所以那就是 Tailwind CSS v4.2 和 v4.3！

🌐 So that's Tailwind CSS v4.2 and v4.3!

使用 npm 更新到最新版本，并今天开始使用它：

🌐 Update to the latest version using npm and start playing with it today:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

试试这些新东西，然后告诉我们你遇到了什么。只是记住，制表符大小超过4是违法的，可能会导致你的软件工程师许可被吊销。

🌐 Try the new stuff and let us know what you run into. Just remember a tab size over 4 is a crime and may result in the suspension of your software engineering license.