Tailwind CSS v4 shipped a lot more than a new config format. Alongside the move to @theme and the CSS-first approach, the team quietly added dozens of utility classes that most developers never reach for. They are not experimental — they are stable, documented, and ready to replace a surprising amount of custom CSS you are probably still writing by hand.
This is not a list of obscure hacks. Every class here is part of the official v4 release (including the 4.2 and 4.3 point releases). They are just easy to miss when you learned Tailwind during the v3 era and have not done a thorough re-read of the docs since upgrading. Let us go through them one by one.
1. Scrollbar utilities
Tailwind v4.3 added first-party scrollbar styling. You no longer need a plugin. The three width classes are scrollbar-auto, scrollbar-thin, and scrollbar-none. Pair them with scrollbar-thumb-* and scrollbar-track-* color utilities.
<div class="overflow-auto scrollbar-thin scrollbar-thumb-slate-400 scrollbar-track-slate-100">
<!-- long content -->
</div>There is also scrollbar-gutter-stable, which reserves space for the scrollbar before content overflows. This prevents the layout jump you see when content grows and a scrollbar appears.
2. Scrollbar gutter
scrollbar-gutter-stable maps to the CSS scrollbar-gutter: stable property. Use it on any container where you know a scrollbar might eventually appear. Your layout stops shifting.
<!-- Gutter space is always reserved; no layout jump on overflow -->
<div class="scrollbar-gutter-stable overflow-y-auto h-96">
<!-- dynamic list -->
</div>3. 3D transform utilities
Tailwind v4 added a full set of 3D transform classes: rotate-x-*, rotate-y-*, translate-z-*, scale-z-*, along with perspective-*, perspective-origin-*, and transform-3d. You no longer need arbitrary values or custom CSS for basic card flips and depth effects.
<div class="perspective-distant">
<div class="transform-3d rotate-x-12 rotate-y-6 transition-transform duration-300 hover:rotate-x-0 hover:rotate-y-0">
<!-- card content -->
</div>
</div>4. field-sizing
Auto-growing textareas used to require a small JavaScript trick — either a hidden clone element or a resize event listener. The CSS field-sizing: content property makes this native, and Tailwind exposes it as field-sizing-content.
<textarea
class="field-sizing-content min-h-24 max-h-64 w-full resize-none"
placeholder="Grows as you type..."
></textarea>It also works on <input> elements: the input widens to fit its content rather than staying a fixed width.
5. color-scheme
In dark mode, native browser UI elements — scrollbars, date pickers, form controls — often stay light because the browser does not know you are running a dark theme. color-scheme-dark on your root element tells the browser to use its dark variants of those controls.
<!-- In your CSS using @theme -->
<!-- Or apply directly -->
<html class="dark color-scheme-dark">
<!-- now native controls match the dark theme -->
</html>6. inset-shadow and inset-ring
Tailwind v4 added inset-shadow-* utilities (e.g., inset-shadow-sm, inset-shadow-lg) and inset-ring-* utilities that are separate layers from the standard shadow-* and ring-*. All four shadow layers can be stacked on one element without fighting each other.
<button class="shadow-md inset-shadow-sm inset-shadow-white/20 ring-1 ring-black/10 inset-ring-1 inset-ring-white/10">
Layered button
</button>This is genuinely useful for glassmorphism-style cards and polished button states without writing a single line of custom CSS.
7. Container queries — built in
In v3 you needed the @tailwindcss/container-queries plugin. In v4 it is built in. Add @container to a parent, then use @sm:, @md:, @lg: prefixes on children. There are also @max-* variants for max-width queries, and you can stack them: @min-md:@max-xl:hidden.
<div class="@container">
<div class="grid grid-cols-1 @md:grid-cols-2 @xl:grid-cols-3 gap-6">
<!-- cards -->
</div>
</div>Container queries respond to the parent container's width, not the viewport. This is the right tool for reusable components like cards and sidebars.
8. @container-size
Regular @container only exposes inline-size (width). If you need the container's block-size (height) — for example, to size a child as a percentage of its parent's height — use @container-size. It enables the cqb and cqh units.
<div class="@container-size h-64">
<div class="h-[50cqb]">
<!-- exactly half the container's height -->
</div>
</div>9. zoom-*
Tailwind v4.3 added zoom-* utilities for the CSS zoom property. Unlike scale-*, which uses a transform and does not affect layout flow, zoom scales the element and its occupied space. Useful for print previews, map embeds, or zooming a section of UI without affecting the rest of the layout.
<div class="zoom-150">
<!-- rendered at 1.5x its natural size, occupying 1.5x the layout space -->
</div>10. tab-*
If you render code examples on your site with <pre> blocks, tab-size controls how wide a tab character appears. Tailwind exposes it as tab-2, tab-4, or arbitrary values. Defaults to the browser's tab width, which is often 8 spaces — visually wide.
<pre class="tab-2 overflow-auto rounded bg-slate-900 p-4 text-sm text-slate-100">
function example() {
const x = 1; // tab-indented
}
</pre>11. Logical property utilities
Tailwind v4.2 expanded logical property support significantly. Instead of pt- and pb- (which are physical top/bottom), you can use pbs- (padding-block-start) and pbe- (padding-block-end). The same pattern applies to margin (mbs-, mbe-), borders, scroll padding, and inset positioning.
<!-- Physical: always top and bottom -->
<div class="pt-6 pb-2">...</div>
<!-- Logical: block-start and block-end, adapts to writing mode -->
<div class="pbs-6 pbe-2">...</div>For most Western left-to-right layouts the output is identical. But if your site ever serves Arabic, Hebrew, or vertical-script users, logical properties handle direction automatically — no extra RTL overrides needed.
12. not-* variant
Tailwind v4 added the not-* variant, which wraps the selector in a CSS :not() pseudo-class. You can negate state-based variants like not-hover:opacity-60, or feature queries like not-supports-grid:flex.
<!-- All items are slightly muted EXCEPT when hovered -->
<li class="not-hover:opacity-60 transition-opacity">...</li>
<!-- Fallback layout for browsers without grid support -->
<div class="not-supports-grid:flex supports-grid:grid">...</div>13. in-* variant
The in-* variant works like group-* but without needing to add the group class to the parent. It targets any ancestor, not just the nearest marked group. This is helpful for components you do not control or when adding a group class is not practical.
<!-- No group class needed on the parent -->
<nav class="is-scrolled">
<a class="in-[.is-scrolled]:text-sm transition-all">Link</a>
</nav>14. nth-* variants
Tailwind v4 added nth-*, nth-last-*, nth-of-type-*, and nth-last-of-type-* variants. Pass any integer, or use arbitrary values for complex expressions like nth-[2n+1].
<ul>
<!-- Alternate background color on odd list items -->
<li class="nth-[odd]:bg-slate-50 p-3">Item</li>
<li class="nth-[odd]:bg-slate-50 p-3">Item</li>
<li class="nth-[odd]:bg-slate-50 p-3">Item</li>
</ul>
<!-- Underline every third item -->
<li class="nth-3:underline">...</li>15. starting variant
The starting variant maps to the CSS @starting-style at-rule, which defines a computed style value for the first paint of an element. Before this, CSS transitions only fired between state changes — an element that entered the DOM with display: block could not transition in from invisible. Now it can.
<div class="opacity-100 transition-opacity duration-500 starting:opacity-0">
<!-- Fades in from 0 to 1 on first render, no JavaScript needed -->
</div>This is particularly useful for dialog and popover enter animations. Combined with the open variant for <details> and <dialog> elements, you can build CSS-only reveal animations.
Putting it together
None of these utilities require plugins, extra configuration, or JavaScript polyfills in supported browsers. They are just classes you install when you install Tailwind v4. The pattern that makes them easy to miss is that most were added in 4.0, 4.2, or 4.3 point releases — announcements that are easy to scroll past when you are busy shipping.
Worth bookmarking: the Tailwind changelog blog publishes a post for every release, and the official v4 upgrade guide lists the full set of new utilities in one place. A twenty-minute read there will likely retire several chunks of custom CSS in your current project.