Scrollbar Styling and Container Size Utilities in Tailwind CSS v4.3.0

Tailwind CSS v4.3.0 brings scrollbar styling utilities, container queries gain a way to read the container's own size, and the @variant directive becomes flexible enough to handle stacked and compound variants directly inside CSS.

• Scrollbar width, color, and gutter utilities
• 新的 @container-size utility for container query units
• zoom-* 和 tab-* utilities
• @variant accepts stacked and compound variants
• --default(…) support inside --value(…) 和 --modifier(…)

# 什么是新的

# Scrollbar Styling Utilities

Tailwind CSS v4.3.0 adds first-party utilities for styling scrollbars. You can control the width and color of scrollbars directly, plus reserve gutter space to prevent layout shift when scrollbars appear.

<
div

班级
=
"scrollbar-thin scrollbar-thumb-slate-500 scrollbar-track-slate-100 overflow-y-auto"
>

<!-- content -->
</
div
>
<
div

班级
=
"scrollbar-gutter-stable"
>

<!-- reserves space so layout doesn't jump -->
</
div
>

PR： #19981 , #20019 , #20018

# @container-size 公用事业

Container queries shipped earlier in v4, and this release adds an @container-size utility that exposes the container's size for use inside the container. It pairs naturally with the existing @container utility for layouts that need to respond to their parent rather than the viewport.

公关稿： #18901

# zoom-* 和 tab-* 实用工具

Two more CSS properties get utility coverage in this release. zoom-* maps to the zoom property for scaling content without affecting layout flow, and tab-* controls tab-size for elements where preserved whitespace matters, like <pre> 块。

PR： #20020 , #20022

# 灵活的 @variant 句法

这 @variant directive now accepts the same stacked and compound variant syntax used in class names. That means you can write CSS that targets hover:focus (both at once) or hover, focus (either) without splitting it into multiple rules.

@variant
hover:focus {

.my-component
{

大纲
:
2
像素

solid

currentColor
;
}
}
@variant
hover, focus {

.my-component
{

背景
:
我们的
（
--color-slate-100
（英文）：
}
}

公关稿： #19996

# --default(…) in Functional Utilities

When defining functional utilities with @utility , you can now reach for --default(…) 里面 --value(…) 和 --modifier(…) to provide a fallback when no value is supplied. It makes custom utilities behave more like the built-in ones, which already gracefully handle the no-argument case.

公关稿： #19989

# Canonicalization and Upgrade Fixes

The canonicalizer used by the upgrade tool got a round of fixes that matter if you run tailwindcss upgrade on existing projects. Significant underscore whitespace is preserved in arbitrary values, original units are kept instead of being normalized (so -mt-[20in] 变成 mt-[-20in] ， 不是 mt-[-1920px] ), arbitrary :has() variants migrate to the shorthand has-[…] form, and inline style attributes are left alone instead of being rewritten into Tailwind classes.

参考

• 发行说明
• Full changelog