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
• New @container-size utility for container query units
• zoom-* and tab-* utilities
• @variant accepts stacked and compound variants
• --default(…) support inside --value(…) and --modifier(…)

#What's New

#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 class="scrollbar-thin scrollbar-thumb-slate-500 scrollbar-track-slate-100 overflow-y-auto">
  <!-- content -->
</div>
 
<div class="scrollbar-gutter-stable">
  <!-- reserves space so layout doesn't jump -->
</div>

PRs: #19981, #20019, #20018

#@container-size Utility

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.

PR: #18901

#zoom-* and tab-* Utilities

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

PRs: #20020, #20022

#Flexible @variant Syntax

The @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 {
    outline: 2px solid currentColor;
  }
}
 
@variant hover, focus {
  .my-component {
    background: var(--color-slate-100);
  }
}

PR: #19996

#--default(…) in Functional Utilities

When defining functional utilities with @utility, you can now reach for --default(…) inside --value(…) and --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.

PR: #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] becomes mt-[-20in], not 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.

References

• Release notes
• Full changelog