<p>Two releases quietly shipped for Tailwind CSS recently, and together they add a solid set of new utilities worth knowing about.</p>
<h2>What came in v4.2</h2>
<h3>Four new color palettes</h3>
<p>Tailwind now ships with mauve, olive, mist, and taupe out of the box. These fill a gap that’s been annoying for a while — neutral-adjacent colors that aren’t quite gray but aren’t quite anything else either.</p>
<h3>Webpack plugin with real build speed improvements</h3>
<p>There’s now a dedicated webpack plugin that reportedly delivers 2x+ build speed improvements over the previous approach. If you’re on a webpack-based setup, this is probably the most immediately useful thing in v4.2.</p>
<h3>Logical property utilities</h3>
<p>More logical property utilities landed for block and inline spacing and sizing. These matter if you’re building for right-to-left languages or just want layout that adapts to writing direction without extra CSS.</p>
<h3>Font feature control</h3>
<p>A new <code>font-features-*</code> utility gives you access to OpenType font features — things like ligatures, small caps, and tabular numbers — directly from your HTML.</p>
<h2>What came in v4.3</h2>
<h3>First-party scrollbar styling</h3>
<p>This one’s been a long time coming. Tailwind now has built-in utilities for <code>scrollbar-width</code>, <code>scrollbar-color</code>, and <code>scrollbar-gutter</code>. Previously you either reached for a plugin or wrote custom CSS. The new utilities map directly to the CSS scrollbar properties, so you get consistent cross-browser scrollbar control without the workarounds.</p>
<h3><code>@container-size</code> for container queries</h3>
<p>A new <code>@container-size</code> utility lets you read container dimensions inside container queries, specifically targeting <code>block-size</code>. This makes it easier to write styles that respond to a container’s height rather than just its width.</p>
<h3><code>zoom-*</code> and <code>tab-*</code> utilities</h3>
<p>Two smaller additions: <code>zoom-*</code> maps to the CSS <code>zoom</code> property, and <code>tab-*</code> controls <code>tab-size</code> for controlling how tab characters render in preformatted text.</p>
<h3>Stacked and compound variants in <code>@variant</code></h3>
<p>The <code>@variant</code> directive now accepts stacked and compound variants. This means you can express more complex variant combinations directly in CSS rather than only in your HTML class strings.</p>
<h3>Default values in functional utilities</h3>
<p>Functional utility definitions now support <code>--default(…)</code> syntax, which lets you specify fallback values inside custom utility definitions. Useful if you’re building design system utilities on top of Tailwind.</p>
<h2>Upgrade tooling</h2>
<p>The v4.3 release also includes fixes to the upgrade tool’s canonicalizer, which should make migrating existing projects a bit less painful.</p>


Collections

Tailwind CSS v4.2 and v4.3 bring several notable additions. v4.2 introduces four new color palettes (mauve, olive, mist, taupe), a dedicated webpack plugin with 2x+ build speed improvements, logical property utilities for RTL support, and OpenType font feature controls. v4.3 adds first-party scrollbar styling utilities (scrollbar-width, scrollbar-color, scrollbar-gutter), a new @container-size utility for height-based container queries, zoom and tab-size utilities, stacked/compound variants in @variant, default values in functional utilities, and improvements to the upgrade tool's canonicalizer.

What's new in Tailwind CSS v4.2 and v4.3

<p>Nice to see tailwind keep getting better</p>


<p>Nice Update… ! excited to use new classes</p>


<p>'mauve’, ‘olive’, ‘mist’, ‘taupe’… bro just say gray with personality.</p>
