Tailwind CSS v4.3: Scrollbars, Container Sizes, and Stacked Variants Without Hand-Written CSS

Tailwind CSS v4.3, available since May 2026 with 4.3.3 already on npm, adds first-party scrollbar utilities, the @container-size utility for vertical container queries, and stacked compound variants: three features that remove custom CSS.

The v4 Line in Context: Why v4.3 Matters

Since 4.0, released in January 2025, Tailwind stopped being a JavaScript-configuration framework and became a CSS-first engine. Configuration happens with directives like @theme, processing runs on a Rust-compiled engine, and the framework takes advantage of the newest web platform features. The 4.3 release does not break that model: it extends it with utilities that previously forced you to hand-write CSS or install third-party plugins.

CSS-First Configuration and a Rust Engine Since 4.0

The paradigm shift was obvious from day one: goodbye to tailwind.config.js as the only source of truth, hello to @import "tailwindcss" and CSS variables defined with @theme. The Rust compiler made builds dramatically faster, and on-demand generation remained a cornerstone. The 4.3 release inherits that whole foundation and adds value on top, without asking you to relearn the framework.

From 4.0's Container Queries to 4.3's Container Sizes

The v4 line was the first to ship container queries out of the box with the @container class and variants like @md:, letting you style a component based on its container's width instead of the viewport. The 4.3 release takes the next step with @container-size: the container's size can now be read from inside it, including its vertical dimension.

Scrollbars with Built-In Utilities

Styling Scrollbars Without Custom CSS or Plugins

Until 4.3, styling a scrollbar meant hand-writing ::-webkit-scrollbar, keeping Firefox prefixes in sync, and matching colors with your theme. Now scrollbar utilities are first-class: width, thumb color, track color, and states. For most projects, custom scrollbar CSS no longer makes sense.

Examples: Thin Scrollbars, Colors, and Hover States

<div class="h-64 overflow-y-auto scrollbar-thin
            scrollbar-thumb-slate-400 scrollbar-track-slate-100
            hover:scrollbar-thumb-sky-500">
  <p>Long scrolling content…</p>
</div>

The scrollbar-thin class reduces the width, scrollbar-thumb-* and scrollbar-track-* control the colors, and variants like hover: work just like with any other utility. No more copy-pasting the ::-webkit-scrollbar block into every project.

@container-size: Vertical Container Queries

Querying the Container's Block Size, Not Just Its Width

The v4 container queries measured the container's width (inline size). The 4.3 release adds the vertical dimension with @container-size: components can now react to the available height (block size), something essential in SaaS dashboard widgets where a card can have variable space.

Reading the Container's Size Inside It with @container-size

<div class="@container @container-size">
  <div class="grid grid-cols-1 @md:grid-cols-3 @min-h-[24rem]:grid-cols-1">
    <div class="rounded-lg bg-white p-4 shadow">Widget A</div>
    <div class="rounded-lg bg-white p-4 shadow">Widget B</div>
    <div class="rounded-lg bg-white p-4 shadow">Widget C</div>
  </div>
</div>

The container exposes its size with @container-size, and children query it with height-based variants such as @min-h-[24rem]:, combinable with the classic width variants. If vertical space is tight, the layout stacks; if there is room, it switches to multiple columns.

Stacked Compound Variants

Combining Multiple Variants in a Single Class

Stacked variants let you chain several modifiers in a single class to target compound states. Where you used to need loose classes or extra CSS, now you write one utility:

<button class="hover:focus:ring-2 hover:focus:ring-sky-400
               dark:hover:bg-slate-700 dark:hover:text-white">
  Save
</button>

Stacking order matters and reads like the resulting CSS: dark:hover:bg-slate-700 applies the background only when dark mode and hover coincide. You can also combine container query variants with breakpoint variants to target specific ranges, exactly as the official responsive design guide documents.

When They Simplify HTML and When to Avoid Them

The practical rule is the same as with any utility: if a stacked class repeats across many elements, extract it into a component; if the stack gets hard to read (three or four prefixes in a row), a semantic class name with @apply or a Blade/React component will read better. Stacked variants win when they remove conditional CSS scattered through the codebase.

Upgrade Guide to 4.3

From 4.0/4.1: Changes and Steps

Upgrading from 4.0 or 4.1 is straightforward: npm install tailwindcss@latest and run your visual checks. There are no mandatory configuration changes; the new utilities coexist with the existing ones. Just review any custom scrollbar CSS and existing @container usage, since there are now variants that can replace them.

From v3: The Big Jump

Coming from v3, the change is bigger: configuration moves from JavaScript to CSS-first with @theme, the build engine changes, and some classes and variants were renamed. The official upgrade guide covers the process step by step, and in Laravel projects with Vite the Tailwind v4 integration works without special configuration. It is worth it: the Rust build and the 4.3 features make up for the migration work.

Hands-On: Dashboard Widgets with container-size

<section class="@container @container-size grid gap-4">
  <article class="rounded-xl border p-4
                  @min-h-[16rem]:flex @min-h-[16rem]:items-center">
    <h3 class="text-lg font-semibold">Weekly sales</h3>
    <p class="mt-2 text-3xl font-bold text-sky-600">$12,480</p>
  </article>
</section>

In a dashboard, each card adapts its layout to the actual height its container gives it: when there is room, content centers vertically; when not, it stays compact. That is the kind of layout that used to require JavaScript measuring the DOM, now solved in pure CSS.

Conclusion

Tailwind CSS v4.3 attacks three fronts that still forced hand-written CSS: scrollbars, vertical container dimensions, and compound variants. If you already use v4, the upgrade is painless and the new utilities show up in the code; if you come from v3, the migration is the final push. Keep following the blog for more CSS and web development tutorials.