Tailwind CSS v4.3 is here, and because apparently shipping v4.2 was easier than remembering to blog about it, this post is secretly about two releases worth of new stuff.
Here's what landed in v4.2:
- New
mauve,olive,mist, andtaupepalettes — four more neutral-ish palettes for when gray, zinc, neutral, stone, and slate have somehow failed you. - First-class webpack plugin — for a huge performance boost in frameworks like Next.js.
- More logical property utilities — including
pbs-*,mbs-*,inline-*,block-*, and new logical inset utilities. - New
font-features-*utility — control low-level OpenType features without writing custom CSS every time.
…and here's what's new in v4.3:
- New scrollbar utilities — style scrollbars without wondering which half-supported browser API you're supposed to use this week.
- New
@container-sizeutility — create size containers for when your container queries need to care about height too. - New
zoom-*utilities — use the CSSzoomproperty directly in your markup, now that every browser has finally agreed it exists. - New
tab-*utilities — control the rendered width of tab characters, just please don't make it eight like GitHub used to. - Stacked + compound
@variantsupport — use stacked and compound variants directly in CSS. - Default values for functional utilities — define utilities that work with or without a value.
A lot of the v4.2 improvements, including the new logical property utilities and font-features-* support, came out of collaborations with teams at Netflix and Vercel through our Partners Program. If there are framework improvements like this that would make Tailwind CSS work better for your team, we'd love to help.
Upgrade your projects by installing the latest version of tailwindcss from npm:
Using the Tailwind CLI
npm install tailwindcss@latest @tailwindcss/cli@latestUsing Vite
npm install tailwindcss@latest @tailwindcss/vite@latestUsing PostCSS
npm install tailwindcss@latest @tailwindcss/postcss@latestUsing webpack
npm install tailwindcss@latest @tailwindcss/webpack@latestNew mauve, olive, mist, and taupe palettes
In v4.2 we added four new color palettes to the default theme: mauve, olive, mist, and taupe.
These originally came out of Oatmeal, the multi-theme marketing site kit we released for Tailwind Plus back in December, where we needed a few more neutral-ish palettes that still felt distinct from the grays we already ship.
They're all in that useful neutral-adjacent category where you want something that still behaves like gray, but has a little more personality:
They're a nice substitute for the existing gray palettes when you want the whole design to lean a little warmer, cooler, greener, or… mauver?
<div class="bg-mauve-950 text-mauve-100 ...">Mauve</div>
<div class="bg-olive-100 text-olive-950 ...">Olive</div>
<div class="border border-mist-200 shadow-taupe-950/10 ...">Mist and taupe</div>Check out the colors documentation for a pretty grid of all the available colors.
First-class webpack plugin
Tailwind CSS v4.2 added a dedicated @tailwindcss/webpack loader for integrating Tailwind CSS in webpack projects.
Before this, webpack projects usually ran Tailwind through postcss-loader and @tailwindcss/postcss, which works, but means CSS has to take a little detour through PostCSS just so Tailwind can get its hands on a string it already knows how to compile.
The dedicated loader skips that extra work, and we've seen it make Tailwind over 2x faster in large, complicated webpack projects. For example, here's what we saw testing against the tailwindcss.com docs with Next.js and Turbopack:
| Package | Build time |
|---|---|
| @tailwindcss/postcss | 932ms |
| @tailwindcss/webpack | 429ms |
| Speedup | 2.17x faster |
Using it is the same sort of setup you're used to from other webpack loaders:
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],
},
],
},
};Because Turbopack supports webpack loaders through its compatibility layer, these improvements carry over there too, which is a big deal for frameworks like Next.js where Turbopack is becoming the default.
Check out the @tailwindcss/webpack README for more details.
More logical property utilities
Tailwind CSS v4.2 added a whole bunch of new logical property utilities, making it easier to build layouts that adapt correctly across different writing modes and directions.
For spacing, there are new block-start and block-end utilities for padding, margin, scroll padding, scroll margin, and borders:
<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">
<!-- ... -->
</div><div class="scroll-mbs-4 scroll-mbe-4 scroll-pbs-12 scroll-pbe-12 ...">
<!-- ... -->
</div><div class="border-bs border-be-2 ...">
<!-- ... -->
</div>We've also added logical sizing utilities for inline-size and block-size, along with min and max variants:
<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ...">
<!-- ... -->
</div>And we've added logical inset utilities for positioning elements:
<div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ...">
<!-- ... -->
</div>The existing start-* and end-* utilities are still available, but they're now deprecated in favor of inset-s-* and inset-e-* so the whole API lines up with inset-bs-* and inset-be-*.
Check out the padding, margin, scroll-padding, scroll-margin, border-width, inline-size, block-size, and top / right / bottom / left docs for more details.
New font-features-* utility
We've also added font-features-* utilities for controlling font-feature-settings:
<div class='font-features-["tnum"] ...'>
<!-- ... -->
</div>For common cases like tabular numbers, you should still reach for higher-level utilities like tabular-nums first, because nobody should have to remember that "tnum" is a thing.
But when you need to enable a font-specific stylistic set or some other OpenType feature we don't have a dedicated utility for, font-features-* gives you a clean escape hatch.
Check out the font-feature-settings docs for more details.
New scrollbar utilities
Tailwind CSS v4.3 adds first-party utilities for the CSS scrollbar APIs, so you can finally do the boring-but-useful scrollbar stuff without opening a second tab and remembering which browser supports what.
Use scrollbar-auto, scrollbar-thin, and scrollbar-none to control scrollbar-width:
<div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">
<!-- ... -->
</div>You can also control scrollbar colors using scrollbar-thumb-* and scrollbar-track-* utilities:
<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">
<!-- ... -->
</div>They work with the usual color opacity modifiers too:
<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">
<!-- ... -->
</div>And for preventing layout shift when scrollbars appear, we've added scrollbar-gutter-auto, scrollbar-gutter-stable, and scrollbar-gutter-both:
<div class="scrollbar-gutter-stable overflow-auto ...">
<!-- ... -->
</div>Check out the scrollbar-width, scrollbar-color, and scrollbar-gutter docs for more details.
New @container-size utility
In Tailwind CSS v4.0 we added first-party container query support with the @container utility, which creates an inline-size container.
That's what you want most of the time, but container query length units like cqb and cqh depend on the block size of the container, and inline-size containers don't expose that information.
So in v4.3 we've added @container-size, which creates a size container instead:
<div class="@container-size">
<div class="h-[50cqb]">
<!-- ... -->
</div>
</div>You can name size containers too using @container-size/{name}, just like @container/{name}.
Check out the responsive design docs for more details.
New zoom-* utilities
Tailwind CSS v4.3 adds zoom-* utilities for the CSS zoom property, one of those ancient browser features that was supported in Chrome 1 back in 2008, but only became fully supported across all major browsers in 2024 after taking the scenic route through a few long-standing SVG bugs:
<div class="zoom-75 ...">Zoomed out</div>
<div class="zoom-100 ...">Normal</div>
<div class="zoom-125 ...">Zoomed in</div>You can also use arbitrary values and CSS variables:
<div class="zoom-[1.1] ...">Zoomed in a little</div>
<div class="zoom-(--preview-zoom) ...">Zoomed using a variable</div>Check out the zoom docs for more details.
New tab-* utilities
We've also added tab-* utilities for controlling the rendered width of tab characters using tab-size.
This is mostly useful for code examples, editors, and any other UI where you're rendering preformatted text that might contain real tab characters:
<pre class="tab-2 ...">function indent() {
return 'tabbed';
}</pre>
<pre class="tab-8 ...">function indent() {
return 'tabbed';
}</pre>Arbitrary values and CSS variables work here too:
<pre class="tab-[12px] ...">...</pre>
<pre class="tab-(--tab-size) ...">...</pre>Check out the tab-size docs for more details.
Stacked + compound @variant support
Tailwind CSS v4.3 makes @variant more flexible when you're using variants in CSS instead of directly in your markup.
You can now use stacked variants:
CSS
.button {
background: var(--color-sky-500);
@variant hover:focus {
background: var(--color-sky-600);
}
}Compiled CSS
.button {
background: var(--color-sky-500);
&:hover {
@media (hover: hover) {
&:focus {
background: var(--color-sky-600);
}
}
}
}And you can use compound variants to share the same block of CSS across multiple variants:
CSS
.button {
background: var(--color-sky-500);
@variant hover, focus {
background: var(--color-sky-600);
}
}Compiled CSS
.button {
background: var(--color-sky-500);
&:hover {
@media (hover: hover) {
background: var(--color-sky-600);
}
}
&:focus {
background: var(--color-sky-600);
}
}You're usually better off creating a real component and styling it with Tailwind CSS classes directly, but when CSS is the right tool, this makes @variant a lot nicer to work with.
Check out the @variant docs for more details.
Default values for functional utilities
Tailwind CSS v4.0 introduced functional @utility definitions, where you can use --value(…) and --modifier(…) to define utilities that accept theme values, bare values, arbitrary values, and modifiers.
In v4.3, you can now pass --default(…) to --value(…) and --modifier(…) when a utility should work with or without a value:
CSS
@utility tab-* {
tab-size: --value(integer, --default(4));
}Now the bare tab utility can fall back to 4, while tab-2 still resolves to 2:
HTML
<pre class="tab ...">...</pre>
<pre class="tab-2 ...">...</pre>Generated CSS
.tab {
tab-size: 4;
}
.tab-2 {
tab-size: 2;
}Check out the @utility docs for more details.
