Tailwind CSS v4.3: Scrollbar Styling, Container Sizes, and Stacked Variants

Tailwind CSS v4.3: Scrollbar Styling, Container Sizes, and Stacked Variants — What You Need to Know

Tailwind CSS v4.3 just shipped, and while it might not look flashy on the surface, it quietly addresses three pain points that have bugged developers since v4 launched. If you're building modern UIs, these utilities will save you from writing custom CSS.

Native Scrollbar Utilities

This is the headline feature. For years, styling scrollbars meant juggling browser-specific pseudo-elements like ::-webkit-scrollbar, scrollbar-width for Firefox, and scrollbar-color. Tailwind v4.3 finally brings first-class support:

<div class="overflow-y-auto scroll-smooth scrollbar scrollbar-thumb-rounded scrollbar-track-gray-200">
  <p>Scrollable content here...</p>
</div>

The new classes map directly to CSS properties: scrollbar enables the scrollbar track, scrollbar-thumb-{color} styles the thumb, and scrollbar-track-{color} sets the background. You can also use scroll-smooth for native smooth scrolling — no more JavaScript polyfills.

Container Size Read-Back (size-*)

Container queries have been in Tailwind since v4, but they only let you query a container's width. v4.3 introduces the ability to read the container's own dimensions:

@custom-variant container-size: @container (size >= 600px) {
  /* Matches when container is at least 600px in either dimension */
}

This means you can now write responsive rules that react to both width and height — critical for card components, media embeds, and any layout where aspect ratio matters.

Stacked and Compound Variants in Pure CSS

The old @variant directive was powerful but limited. v4.3 makes it flexible enough to stack modifiers directly inside your stylesheet:

@variant dark (&:where(.dark, .dark &));
@variant group-hover [>_&] {
  /* Matches when a parent .group is hovered */
}

You can now chain variants, define compound conditions, and compose them without reaching for JavaScript config. This brings the variant system closer to what CSS authors actually need: composability.

Should You Upgrade?

If you're already on Tailwind v4, upgrading to 4.3 is a no-brainer — these features eliminate entire files of custom CSS. The migration path is trivial since all changes are additive. Run npx @tailwindcss/update@latest, bump your dependency, and enjoy.

The bigger story here is that Tailwind's CSS-first approach (introduced in v4) keeps paying dividends. No config file means fewer files to maintain, faster builds thanks to the Rust engine, and a developer experience that finally feels like writing plain CSS with superpowers.

Tailwind isn't just a utility library anymore — it's becoming a full CSS framework that competes with raw stylesheet authoring on expressiveness while winning on consistency.