New Colors Added in Tailwind CSS v4.2

Tailwind CSS v4.2.0 adds a new webpack plugin, four new default color palettes, a full set of logical property utilities for block-direction spacing and borders, and new inline/block size utilities that map directly to CSS logical sizing properties.

Key highlights include:

• New @tailwindcss/webpack plugin package
• Four new colors added to the default theme: mauve, olive, mist, and taupe
• Block-direction padding, margin, border, scroll padding, and scroll margin utilities
• Logical inset utilities (inset-s-*, inset-e-*, inset-bs-*, inset-be-*)
• Inline/block size utilities (inline-*, block-*, and min/max variants)
• font-features-* utility for font-feature-settings
• start-* and end-* deprecated in favor of inline-s-* and inline-e-*

#What's New

#Webpack Plugin

A new @tailwindcss/webpack package brings Tailwind CSS as a first-class webpack plugin:

// webpack.config.js
import tailwindcss from '@tailwindcss/webpack';
 
export default {
  plugins: [new tailwindcss()],
};

#New Color Palettes

The default theme now includes four new color palettes: mauve, olive, mist, and taupe. These work with all standard color utilities and scale steps:

<div class="bg-mauve-100 text-mauve-900">Mauve</div>
<div class="bg-olive-200 border border-olive-400">Olive</div>
<div class="bg-mist-50 text-mist-700">Mist</div>
<div class="bg-taupe-300 hover:bg-taupe-400">Taupe</div>

#Logical Property Utilities

This release adds a set of utilities for CSS logical properties in the block direction that map to the physical top/bottom sides while respecting writing mode and text direction:

Padding block:

<div class="pbs-4 pbe-8">
  <!-- padding-block-start: 1rem; padding-block-end: 2rem -->
</div>

Margin block:

<div class="mbs-6 mbe-2">
  <!-- margin-block-start: 1.5rem; margin-block-end: 0.5rem -->
</div>

Border block:

<div class="border-bs border-be border-gray-300">
  <!-- border-block-start and border-block-end -->
</div>

Scroll padding and margin block:

<div class="scroll-pbs-4 scroll-mbe-2">
  <!-- scroll-padding-block-start and scroll-margin-block-end -->
</div>

Logical inset:

The inset-s-*, inset-e-*, inset-bs-*, and inset-be-* utilities cover logical positioning for inline-start, inline-end, block-start, and block-end respectively:

<div class="absolute inset-bs-0 inset-be-0 inset-s-4">
  <!-- pinned to block-start and block-end, offset from inline-start -->
</div>

#Inline/Block Size Utilities

New utilities map to the CSS inline-size and block-size properties, which are the logical equivalents of width and height. All standard size scale values, plus min-* and max-* variants, are available:

<!-- Logical width (inline-size) -->
<div class="inline-64 min-inline-0 max-inline-full">...</div>
 
<!-- Logical height (block-size) -->
<div class="block-32 min-block-screen max-block-none">...</div>

#font-features-* Utility

A new font-features-* utility provides access to the font-feature-settings CSS property. This allows enabling or disabling OpenType font features such as ligatures, small caps, and tabular numbers:

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

#Deprecations

The start-* and end-* utilities are deprecated in this release in favor of inline-s-* and inline-e-*. The new names align with the broader logical property naming convention introduced alongside the block-direction and size utilities. Update usages when upgrading:

<!-- Deprecated -->
<div class="start-4 end-0">...</div>
 
<!-- Preferred -->
<div class="inline-s-4 inline-e-0">...</div>

#References

• GitHub Release
• Changelog