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/webpackThen, you integrate it into your webpack configuration file:
// webpack.config.js
import tailwindcss from '@tailwindcss/webpack';
export default {
plugins: [
tailwindcss(),
],
};That's it.
No more need to configure PostCSS separately for Tailwind. The plugin automatically handles scanning your source files, generating utility classes, and optimizing the final CSS.
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:
| Tag | Feature | Description |
|---|---|---|
liga | Standard ligatures | Merges certain character pairs (fi, fl…) |
calt | Contextual alternates | Adjusts glyphs based on context |
tnum | Tabular figures | Fixed-width digits for alignment |
smcp | Small caps | Transforms lowercase letters into small capitals |
frac | Fractions | Displays fractions in typographic format |
onum | Old-style figures | Digits with ascenders and descenders |
ss01–ss20 | Stylistic sets | Alternative glyph sets defined by the font |
Not all fonts support every OpenType tag. Check the features available in your font before applying these utilities, otherwise they will have no effect! 😉
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
| Tailwind utility | CSS property | Physical equivalent |
|---|---|---|
inline-* | inline-size | w-* (in horizontal mode) |
min-inline-* | min-inline-size | min-w-* |
max-inline-* | max-inline-size | max-w-* |
block-* | block-size | h-* (in horizontal mode) |
min-block-* | min-block-size | min-h-* |
max-block-* | max-block-size | max-h-* |
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
| Old (deprecated) | New (recommended) | CSS property |
|---|---|---|
start-4 | inset-s-4 | inset-inline-start: 1rem |
end-0 | inset-e-0 | inset-inline-end: 0 |
start-auto | inset-s-auto | inset-inline-start: auto |
end-full | inset-e-full | inset-inline-end: 100% |
start-px | inset-s-px | inset-inline-start: 1px |
-start-4 | -inset-s-4 | inset-inline-start: -1rem |
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>Deprecated utilities will continue to work for now, but they will be removed in a future major version. We recommend migrating as soon as possible to avoid surprises.
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
@propertyrules. - 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]becomesp-[1.2rem]. - Merging of directional borders:
border-t-* border-b-*intoborder-y-*, andborder-l-* border-r-*intoborder-x-*. - Similar merging for
scroll-m*,scroll-p*,overflow-*, andoverscroll-*. - Automatic migration from
overflow-ellipsistotext-ellipsis.
Version 4.2.4 — Import resolution
- Fixed import resolution in
@importand@pluginwhen 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 --latestDon't forget to update the integration packages if you use them:
npm install @tailwindcss/vite@latest @tailwindcss/postcss@latestOr, 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/upgradeThis 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.
Before any migration, create a dedicated branch with git and visually verify the results after the upgrade. The automatic tool covers the majority of cases, but some custom configurations may require manual adjustments.
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:
| Feature | 4.0 | 4.1 | 4.2 |
|---|---|---|---|
| Oxide engine (Rust) | ✅ | ✅ | ✅ |
| Native Vite plugin | ✅ | ✅ | ✅ |
| Native webpack plugin | ❌ | ❌ | ✅ |
| Logical block properties | ❌ | ❌ | ✅ |
| Inline/block size utilities | ❌ | ❌ | ✅ |
| font-feature-settings | ❌ | ❌ | ✅ |
| Mauve, olive, mist, taupe colors | ❌ | ❌ | ✅ |
| Advanced canonicalization | Basic | Improved | Complete |
| Vite 8 support | ❌ | ❌ | ✅ (4.2.2+) |
Frequently asked questions
Is Tailwind CSS 4.2 backward compatible with version 4.1?
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.
Should I use CSS logical properties even if my site is only in English?
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.
Does the @tailwindcss/webpack plugin replace @tailwindcss/postcss?
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.
How do I automatically migrate from start-* / end-* to inset-s-* / inset-e-*?
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.
What features are expected in Tailwind CSS 4.3?
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!
How can I learn Tailwind CSS?
Through our complete course!