Tailwind CSS 4.2: All New Features and Improvements

Tailwind CSS 4.2, released on February 18, 2026, brings major additions to the most popular utility-first framework: new color palettes, CSS logical property utilities, a native webpack plugin, and advanced typographic control via font-feature-settings.

Here is a complete overview of this version and what it changes in your daily workflow.

The official webpack plugin: @tailwindcss/webpack

Until now, integrating Tailwind CSS into a webpack project required going through PostCSS, with a sometimes verbose configuration involving postcss-loader, a postcss.config.js file, and manual adjustments.

Version 4.2 changes the game by introducing a first-class webpack plugin: @tailwindcss/webpack.

Installation and configuration

Installation is straightforward:

npm install @tailwindcss/webpack

Then, you integrate it into your webpack configuration file:

// webpack.config.js
import tailwindcss from '@tailwindcss/webpack';

export default {
  plugins: [
    tailwindcss(),
  ],
};

That's it.

When to use this plugin instead of Vite or PostCSS?

This plugin is primarily aimed at projects that still rely on webpack as their main bundler.

This is the case for many enterprise applications, Next.js projects with custom configurations, or legacy codebases that have not yet migrated to Vite.

If you are already using @tailwindcss/vite or @tailwindcss/postcss, you don't need to change — those solutions remain perfectly valid.

The font-features-* utility for typographic control

Typography is often underutilized.

Many OpenType fonts include advanced features (ligatures, small caps, tabular figures, fractions) that remain inaccessible without touching raw CSS.

Tailwind CSS 4.2 introduces the font-features-* utility, mapped directly to the CSS property font-feature-settings.

Syntax and usage examples

You can enable specific OpenType features by passing their tags as an arbitrary value:

<!-- Enable ligatures and contextual alternates -->
<p class="font-features-['liga','calt']">
  Text with elegant ligatures
</p>

<!-- Tabular figures for perfect alignment in tables -->
<td class="font-features-['tnum']">
  1,234.56
</td>

<!-- Small caps -->
<span class="font-features-['smcp']">
  Text in Small Caps
</span>

Most common OpenType tags

Here are the tags you will use most frequently:

CSS logical property utilities

This is probably the most structurally significant addition in Tailwind CSS 4.2. CSS logical properties replace physical properties (top, right, bottom, left) with properties that automatically adapt to the writing mode and text direction.

This makes them essential for multilingual sites supporting RTL languages (Arabic, Hebrew) or vertical writing modes (Japanese, Chinese).

Block padding and margin

The pbs-* and pbe-* utilities control padding-block-start and padding-block-end respectively. In the same way, mbs-* and mbe-* handle margin-block-start and margin-block-end:

<!-- Block padding: top/bottom in horizontal writing mode -->
<div class="pbs-4 pbe-8">
  Logical vertical padding
</div>

<!-- Block margin -->
<section class="mbs-6 mbe-12">
  Section with logical margins
</section>

In horizontal writing mode (the most common), pbs-4 is equivalent to pt-4 and pbe-8 is equivalent to pb-8.

But in vertical writing mode, these same utilities will automatically adapt to target the correct physical sides.

Logical block borders

The border-bs-* and border-be-* utilities allow you to define borders on the logical block sides:

<div class="border-bs-2 border-bs-blue-500 border-be border-be-gray-200">
  Blue border at top (block-start), gray border at bottom (block-end)
</div>

Scroll padding and scroll margin block

For layouts with scroll snap or navigation anchors, the scroll-pbs-*, scroll-pbe-*, scroll-mbs-*, and scroll-mbe-* utilities provide the same logical control over scrolling:

<div class="scroll-pbs-16">
  Fixed header offset when scrolling to an anchor
</div>

Logical insets

Tailwind CSS 4.2 also adds inset-s-*, inset-e-*, inset-bs-*, and inset-be-*, which correspond respectively to inset-inline-start, inset-inline-end, inset-block-start, and inset-block-end:

<!-- Logical positioning of an absolute element -->
<div class="absolute inset-s-4 inset-bs-0">
  Positioned 1rem from the inline start and flush with the block-start
</div>

These utilities replace the old start-* and end-*, which are now deprecated (we cover this below).

The inline-size and block-size utilities

Following the same logic as logical positioning properties, Tailwind CSS 4.2 introduces utilities for logical sizing. The CSS properties inline-size and block-size are the logical equivalents of width and height.

Sizing utility reference

Practical example

<!-- Card with logical sizing -->
<div class="inline-80 max-inline-full block-auto min-block-48">
  <p>This card has a logical width of 20rem,
     does not exceed 100% of its parent,
     and has a minimum logical height of 12rem.</p>
</div>

The advantage of these utilities over w-* and h-* is that they automatically adapt when the writing mode changes. If your site supports Japanese in vertical mode, inline-80 will become the physical height and block-auto the width.

Four new color palettes

Tailwind CSS 4.2 enriches the default color palette with four new shades that fill gaps in the color space previously absent from the framework:

Mauve

A subtle gray-violet, perfect for interfaces that seek a soft and contemporary atmosphere without shifting to an outright purple:

<div class="bg-mauve-50 text-mauve-900 p-6 rounded-lg">
  <h3 class="text-mauve-700 font-semibold">Notification</h3>
  <p>Your account has been updated successfully.</p>
</div>

Olive

An earthy green-brown that brings organic warmth. Ideal for sites related to nature, food, or sustainability:

<div class="bg-olive-100 border border-olive-300 text-olive-800 p-4 rounded">
  Product from organic farming
</div>

Mist

A delicate blue-gray, between slate and sky. Mist is particularly well-suited for neutral backgrounds and technical interfaces:

<nav class="bg-mist-900 text-mist-100 px-6 py-3">
  <span class="text-mist-300">Dashboard</span>
</nav>

Taupe

A warm beige-gray that perfectly complements the stone and zinc palettes. Taupe is ideal for elegant and minimalist designs:

<section class="bg-taupe-50 text-taupe-800">
  <div class="border-b border-taupe-200 pb-4 mb-4">
    <h2 class="text-taupe-900">Our collection</h2>
  </div>
</section>

Each palette is available in 11 shades (from 50 to 950), like all existing colors.

They integrate naturally with all color utilities: bg-*, text-*, border-*, ring-*, shadow-*, etc.

Deprecations: start-* and end-* replaced

To maintain consistency in the logical property naming system, the start-* and end-* utilities are officially deprecated in Tailwind CSS 4.2. They are replaced by inset-s-* and inset-e-*.

Migration table

Automatic migration

Tailwind CSS's canonicalization tool, available via the upgrade tool and the Prettier plugin, handles this migration automatically. If you run the npx @tailwindcss/upgrade command, your files will be updated:

<!-- Before (deprecated) -->
<div class="absolute start-4 end-0">...</div>

<!-- After (recommended) -->
<div class="absolute inset-s-4 inset-e-0">...</div>

Bug fixes and improvements in versions 4.2.x

Since the initial release of 4.2.0, several patches have been published to fix bugs and improve performance. Here is a summary of the most important fixes.

Version 4.2.1 — Minor fixes

• Fixed detection of classes containing . characters in MDX files inside curly braces.
• Restored compatibility with trailing hyphens in functional utility names.

Version 4.2.2 — Vite 8 support

• Added Vite 8 support in @tailwindcss/vite, ensuring compatibility with the latest version of the bundler.
• Fixed a crash during the canonicalization step with utilities containing @property rules.
• Improved canonicalization for values exceeding the default spacing scale.

Version 4.2.3 — Advanced canonicalization

This version brings a series of major improvements to canonicalization:

• Automatic merging of arbitrary values into shorthand utilities: px-[1.2rem] py-[1.2rem] becomes p-[1.2rem].
• Merging of directional borders: border-t-* border-b-* into border-y-*, and border-l-* border-r-* into border-x-*.
• Similar merging for scroll-m*, scroll-p*, overflow-*, and overscroll-*.
• Automatic migration from overflow-ellipsis to text-ellipsis.

Version 4.2.4 — Import resolution

• Fixed import resolution in @import and @plugin when using Vite aliases with @tailwindcss/vite.

Upgrade guide to Tailwind CSS 4.2

Whether you are on Tailwind CSS 4.0, 4.1, or even 3.x, here is how to upgrade cleanly.

From Tailwind CSS 4.0 or 4.1

The upgrade is trivial if you are already on the 4.x branch:

# npm
npm install tailwindcss@latest

# pnpm
pnpm update tailwindcss

# yarn
yarn upgrade tailwindcss --latest

Don't forget to update the integration packages if you use them:

npm install @tailwindcss/vite@latest @tailwindcss/postcss@latest

Or, if you want to adopt the new webpack plugin:

npm install @tailwindcss/webpack@latest

From Tailwind CSS 3.x

If you are migrating from version 3, use the automatic upgrade tool:

npx @tailwindcss/upgrade

This tool analyzes your code, migrates the configuration, and updates deprecated classes.

Since 4.2.3, it uses config.content to determine which files to migrate, which significantly improves migration accuracy.

Best practices for getting the most out of Tailwind CSS 4.2

Here are some recommendations to make the most of the new features in this version.

Adopt logical properties now

Even if your site is not yet multilingual, using logical properties is a good habit. If you ever add RTL support or a vertical writing mode, your layout will adapt without any code changes:

<!-- Prefer this -->
<div class="pbs-4 pbe-4 inline-full">...</div>

<!-- Rather than this (physical) -->
<div class="pt-4 pb-4 w-full">...</div>

Use the new colors sparingly

The four new palettes are tempting, but resist the urge to use all of them in the same project. Choose one or two complementary palettes and stay consistent within your design system.

Use font-features-* for data-heavy interfaces

If you are building dashboards or interfaces displaying a lot of numerical data, enable font-features-['tnum'] on your tables. Tabular figures considerably improve readability by guaranteeing perfect column alignment.

Migrate deprecations proactively

Don't wait for a future version to remove deprecated utilities. Use the upgrade tool or a simple find-and-replace in your editor to switch from start-*/end-* to inset-s-*/inset-e-*.

Comparison with previous versions

To better place this release in the evolution of Tailwind CSS 4.x, here is a comparison of key features:

Frequently asked questions

Yes, Tailwind CSS 4.2 is fully backward compatible with versions 4.0 and 4.1. The only breaking changes concern the deprecation of the start-* and end-* utilities, which continue to work but generate a warning. All your existing styles will remain valid after the update.

It's not mandatory, but it is a good practice. Logical properties don't change anything in LTR horizontal rendering, but they prepare your code for potential internationalization. Furthermore, they allow Tailwind's canonicalization tools to better optimize your classes.

No, these are two complementary approaches. The webpack plugin is designed for projects that use webpack as their bundler and want to avoid the extra PostCSS layer. If your current setup with PostCSS works well, you have no reason to migrate to the webpack plugin. It is an additional option, not a replacement.

You can use the official upgrade tool with npx @tailwindcss/upgrade, which handles this migration automatically. The canonicalization step (also available via the Tailwind Prettier plugin) also transforms these utilities when formatting your code. Alternatively, a simple find-and-replace in your IDE will do the job for straightforward cases.

The Tailwind Labs team has not yet published an official roadmap for version 4.3. However, given the project's trajectory (strengthening CSS logical property support, continuous improvement of canonicalization, and expanding integrations with bundlers), we can expect a deepening of these directions. We will cover it here!

Through our complete course!