Tailwind CSS 4.2: What's New, Release History & EOL Status

What Is New in Tailwind CSS 4.2

What are the new neutral color palettes in Tailwind CSS 4.2 and when should I use them?

Tailwind CSS 4.2 adds four new neutral-adjacent palettes - mauve, olive, mist, and taupe - to give designers more subtle options beyond the existing gray families.

These palettes behave like the built-in gray scales but add a hint of color, making them ideal for UI that needs a warmer or cooler feel without sacrificing neutrality.

<div class="bg-mauve-950 text-mauve-100 p-4">Mauve</div>
<div class="bg-olive-100 text-olive-950 p-4">Olive</div>
<div class="border border-mist-200 shadow-taupe-950/10 p-4">Mist & Taupe</div>

How does the new @tailwindcss/webpack loader affect build performance?

The dedicated @tailwindcss/webpack loader removes the PostCSS detour and can cut build times by more than half in large projects.

In practice this means faster feedback loops for teams using Next.js, Turbopack, or any webpack-based bundler.

// 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"],
      },
    ],
  },
};

Benchmarks showed the webpack loader completing in 429 ms versus 932 ms for the previous postcss-loader setup.

Which logical property utilities were introduced in 4.2 and how do they simplify writing-mode-aware layouts?

v4.2 adds block-start/end padding, margin, scroll-padding, scroll-margin, border, inset, and sizing utilities that respect the element's writing mode.

This matters if your app supports vertical-rl or rtl languages, because the same class will adapt automatically.

<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>
<div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8">...</div>
<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0">...</div>

The old start-* and end-* utilities remain but are now deprecated in favor of the new inset-s-* / inset-e-* naming.

How can I enable OpenType font features with Tailwind CSS 4.2?

The new font-features-* utilities map directly to the CSS font-feature-settings property, letting you toggle features like tabular numbers without custom CSS.

Use the utility when a higher-level shortcut (e.g., tabular-nums) does not exist for the feature you need.

<div class='font-features-["tnum"] text-base'>12345</div>

Arbitrary values are also supported, so you can enable any OpenType tag on the fly.

What utilities are deprecated in Tailwind CSS 4.2 and what should I replace them with?

The old start-* and end-* spacing utilities are deprecated; use inset-s-* and inset-e-* (or the block/inline equivalents) instead.

Replacing them now avoids future breaking changes and aligns your code with the logical-property naming scheme.

<!-- Deprecated -->
<div class="start-4 end-2">...</div>

<!-- Recommended -->
<div class="inset-s-4 inset-e-2">...</div>