New Colors Added in Tailwind CSS v4.2

On February 19th, 2026, Tailwind CSS released version 4.2.0, introducing several exciting features that enhance the framework’s usability and flexibility. This update includes a new webpack plugin, four new default color palettes, and a comprehensive set of logical property utilities. Additionally, new inline and block size utilities have been added, making it easier for developers to create responsive designs. This article will explore these new features in detail, providing insights into how they can improve your development workflow.

What’s New

Webpack Plugin

The most notable addition in Tailwind CSS v4.2 is the new @tailwindcss/webpack plugin. This package allows Tailwind CSS to be integrated as a first-class webpack plugin, streamlining the build process for developers who use webpack as their module bundler. The integration is straightforward and can be implemented in your webpack configuration file as follows:

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

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

This plugin simplifies the setup process and ensures that Tailwind CSS works seamlessly with your existing webpack configuration.

New Color Palettes

Tailwind CSS v4.2 introduces four new color palettes to the default theme: mauve, olive, mist, and taupe. These colors are designed to work with all standard color utilities and scale steps, providing developers with additional options for styling their applications. Below are examples of how these new colors can be utilized:

• Mauve
• Olive
• Mist
• Taupe

These new colors can enhance the aesthetic appeal of your projects and provide a modern look and feel.

Logical Property Utilities

This release also adds a comprehensive set of utilities for CSS logical properties in the block direction. These utilities map to the physical top and bottom sides while respecting writing mode and text direction. The new logical property utilities include:

• Padding Block:
• Margin Block:
• Border Block:
• Scroll Padding and Margin Block:

These utilities provide developers with a more intuitive way to manage layout and spacing in their applications, especially in multilingual contexts where text direction may vary.

Inline/Block Size Utilities

In addition to logical property utilities, Tailwind CSS v4.2 introduces new inline and block size utilities that map directly to the CSS inline-size and block-size properties. These utilities allow developers to control the width and height of elements in a logical manner. The available utilities include:

• Logical Width (Inline-Size):
  …
• Logical Height (Block-Size):
  …

These new size utilities enable developers to create more responsive designs that adapt to different screen sizes and orientations.

Font Features Utility

Another significant addition in this release is the new font-features-* utility. This utility provides access to the font-feature-settings CSS property, allowing developers to enable or disable OpenType font features such as ligatures, small caps, and tabular numbers. For example:

Text with ligatures and contextual alternates

This feature enhances typographic control, enabling developers to create more visually appealing text styles in their applications.

Deprecations

As with any major update, some utilities have been deprecated in favor of more intuitive naming conventions. In Tailwind CSS v4.2, the start-* and end-* utilities are deprecated and replaced with inline-s-* and inline-e-* utilities. Developers are encouraged to update their code to reflect these changes:

...


...

This change aligns with the broader logical property naming convention introduced alongside the block-direction and size utilities.

Conclusion

Tailwind CSS v4.2 brings a wealth of new features and enhancements that empower developers to create more flexible and responsive designs. The introduction of new color palettes, logical property utilities, and the webpack plugin significantly improves the framework’s usability. By adopting these new features, developers can streamline their workflows and enhance the visual quality of their applications.

Note: Tailwind CSS continues to evolve, and staying updated with the latest releases will ensure that your projects leverage the best practices and features available in the framework.

Frequently Asked Questions