Tailwind CSS 4.2: New Colors, Logical Properties, and a Webpack Plugin

Tailwind CSS 4.2.0 landed this week with a focused set of additions: new default colors, a broad expansion of CSS logical property utilities, a webpack plugin, and fine-grained font feature control. Here's what's actually in the release.¹

Four new color palettes

The default theme gains four neutral-adjacent palettes: mauve (purple-tinted), olive (green-tinted), mist (blue-tinted), and taupe (warm brown). All four follow the same scale structure as existing palettes (50–950) and use OKLCH values consistent with Tailwind v4's color system.

These fill a gap that has sent a lot of projects to custom theme configuration — warm and cool neutrals that aren't the clinical gray of slate or the cool tone of zinc. For design systems that need tonal variation in backgrounds, borders, and text without reaching for a full accent color, these are immediately useful.

CSS logical properties — a comprehensive expansion

The bulk of the release is a systematic addition of logical property utilities. CSS logical properties use writing-mode-relative terms (inline, block, start, end) instead of physical directions (left, right, top, bottom), which matters for RTL layouts and vertical writing modes.

Block-axis sizing:

block-*, min-block-*, max-block-* → block-size, min-block-size, max-block-size

Inline-axis sizing:

inline-*, min-inline-*, max-inline-* → inline-size, min-inline-size, max-inline-size

Block-axis spacing:

pbs-* / pbe-* → padding-block-start / padding-block-end
mbs-* / mbe-* → margin-block-start / margin-block-end
scroll-pbs-* / scroll-pbe-* → scroll-padding-block-start / scroll-padding-block-end
scroll-mbs-* / scroll-mbe-* → scroll-margin-block-start / scroll-margin-block-end
border-bs-* / border-be-* → border-block-start / border-block-end

Inset utilities (and a deprecation):

inset-s-*, inset-e-* → inset-inline-start, inset-inline-end
inset-bs-*, inset-be-* → inset-block-start, inset-block-end
The old start-* and end-* utilities are deprecated in favor of the new inset-s-* / inset-e-* names

The mnemonic for the naming: s/e = start/end on the inline axis; bs/be = block-start/block-end. Once you internalize that, the full set is consistent.

For projects that are RTL-aware or support vertical CJK layouts, this removes most of the need for custom utilities or the @tailwindcss/rtl community plugin.

First-class webpack plugin

@tailwindcss/webpack is now an official package — a proper webpack plugin that runs Tailwind CSS as part of the webpack build pipeline, consistent with how @tailwindcss/vite works.

This matters for projects that haven't migrated to Vite: Next.js with its webpack-based builds, legacy Create React App setups, and any large enterprise project with a custom webpack configuration. Previously, using Tailwind v4 with webpack required workarounds; now it's a first-class integration.

// webpack.config.js
const tailwindcss = require("@tailwindcss/webpack");

module.exports = {
  plugins: [new tailwindcss()],
};

Font feature settings

font-features-* is a new utility that exposes font-feature-settings directly. This gives you control over OpenType features — ligatures, small caps, tabular numbers, old-style figures, slashed zero — through Tailwind classes rather than custom CSS.

<span class="font-features-tnum">1,234,567</span>  <!-- tabular numbers -->
<span class="font-features-smcp">Hello</span>       <!-- small caps -->
<span class="font-features-zero">0</span>           <!-- slashed zero -->

Most of this was previously only achievable via [font-feature-settings:'tnum'] arbitrary values. Having named utilities here is a small but welcome ergonomics improvement for typography-heavy UIs.

Notable fixes

A few bug fixes worth knowing about:

Oxide scanner performance: reduced filesystem walks in larger projects — faster builds for monorepos and big codebases
Astro v5 + Vite: import aliases now work correctly without crashing
@variant inside @custom-variant: infinite loop bug resolved
aspect-* fractions: multiples of 0.25 now work (e.g., aspect-8.5/11 for US Letter paper ratio)
Biome compatibility: escape characters in @utility names are now allowed

Upgrading

npm install tailwindcss@latest
# or
bun add tailwindcss@latest

If you use the webpack integration:

npm install @tailwindcss/webpack@latest

The deprecation of start-*/end-* in favor of inset-s-*/inset-e-* is the only breaking change to watch for. The old utilities still work — they're deprecated, not removed — so existing code won't break. Plan to migrate when it's convenient.