Last checked and updated on 17 May 2026
What Is New in Tailwind CSS 4.3
| Category | Highlights |
|---|---|
| New Features | Scrollbar utilities, @container-size, zoom-*, tab-*, stacked & compound @variant support, default values for functional utilities |
| Improvements | First-class webpack loader (≈2× faster builds), expanded logical-property utilities (block-start/end, inset-s/e), font-features-* utilities |
| Breaking Changes | start-* and end-* utilities are deprecated; use inset-s-* and inset-e-* instead |
| Deprecations | Legacy start-* / end-* spacing and inset helpers are removed in favor of the new logical naming |
How can I style scrollbars using Tailwind CSS 4.3?
Tailwind CSS 4.3 introduces first-party scrollbar utilities that let you control width, colors, and gutter behavior directly in markup.
scrollbar-auto,scrollbar-thin,scrollbar-nonemap toscrollbar-width.- Color utilities
scrollbar-thumb-*andscrollbar-track-*accept the full Tailwind color palette and opacity modifiers. - Gutter utilities
scrollbar-gutter-auto,scrollbar-gutter-stable, andscrollbar-gutter-bothprevent layout shift when scrollbars appear.
<div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto">...</div>What new container query utilities does Tailwind CSS 4.3 provide?
The @container-size utility creates size-based containers, enabling block-size queries such as cqb and cqh that were impossible with the original inline-size only @container.
- Use
@container-sizeto wrap any element that needs to expose both its inline and block dimensions. - Named size containers are supported via
@container-size/{name}, mirroring the existing@container/{name}syntax.
<div class="@container-size"> <div class="h-[50cqb]">...</div></div>How have logical property utilities evolved and what deprecations should I watch for?
Tailwind CSS 4.2 added a full set of logical-property utilities and 4.3 deprecates the older start-* and end-* helpers in favor of inset-s-* and inset-e-*.
- Block-start/end spacing:
mbs-6,mbe-2,pbs-4,pbe-8. - Logical inset for positioning:
inset-s-0,inset-e-4,inset-bs-2,inset-be-8. - Logical sizing:
block-64,inline-full,max-block-screen,min-inline-0.
<div class="mbs-6 mbe-2 pbs-4 pbe-8">...</div>Watch out for any existing start-* or end-* classes; they will be removed in a future minor release.
What are the new zoom, tab, and @variant capabilities in Tailwind CSS 4.3?
Version 4.3 adds zoom-*, tab-*, stacked & compound @variant support, and default values for functional utilities.
zoom-75,zoom-100,zoom-125map to the CSSzoomproperty; arbitrary values and CSS variables are also allowed.tab-2,tab-8controltab-sizefor preformatted text; arbitrary values work astab-[12px]ortab-(--tab-size).- Stacked variants let you nest multiple pseudo-states in one rule, while compound variants share a block of CSS across several states.
- Functional utilities can now define a
--default(...)fallback, so a bare class liketabresolves to a sensible default.
<div class="zoom-125">Zoomed in</div><pre class="tab-2">function foo(){...}</pre>Frequently Asked Questions
Do I need to change my install command to get Tailwind CSS 4.3?
You can upgrade with npm install tailwindcss@latest and the appropriate @tailwindcss/* package for your build tool.
Are the new scrollbar utilities compatible with Safari?
They work in browsers that support the CSS scrollbar-width and scrollbar-color properties, which includes Safari 15 and newer.
How do I enable the first-class webpack loader in an existing project?
Replace @tailwindcss/postcss with @tailwindcss/webpack in your webpack.rules and install the new package.
What is the exact syntax for creating a named size container?
Use @container-size/{name} on the wrapper element, for example @container-size/sidebar.
Will the old start-* utilities still work after upgrading to 4.3?
They are deprecated and will emit warnings; they will be removed in a future minor release.
How can I apply a 125% zoom using Tailwind classes?
Use the class zoom-125 on the element you want to scale.