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

What Is New in Tailwind CSS 2.1

How can I enable the new JIT engine in Tailwind CSS 2.1?

You enable it by adding mode: 'jit' to your tailwind.config.js file.

When the JIT mode is active Tailwind generates classes on-demand during development, which dramatically reduces build times and eliminates the need for a massive pre-generated stylesheet.

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    // paths to your template files
  ],
  // other configuration...
}

Watch out for the preview status: the API may still evolve, but the core workflow remains the same.

What filter and backdrop-filter utilities are available in Tailwind CSS 2.1?

Tailwind 2.1 introduces first-class filter and backdrop-filter utilities.

Use the filter utility to enable CSS filters and then compose individual effects such as blur, grayscale, invert, or saturate directly in your markup.

<div class="filter blur-md grayscale invert">...</div>

Backdrop filters work the same way but affect the area behind the element.

<div class="backdrop-filter backdrop-blur backdrop-brightness-50">...</div>

This matters if you need modern UI effects without writing custom CSS.

How do blending mode, isolation, and box-decoration-break utilities work in Tailwind CSS 2.1?

Tailwind 2.1 adds utilities for mix-blend-mode, background-blend-mode, isolation, and box-decoration-break.

• Blending modes: mix-blend-multiply, mix-blend-screen, bg-blend-overlay, etc., let you control how an element's content blends with its background.
• Isolation: isolate creates a new stacking context, useful when combined with blending modes to avoid unwanted bleed-through.
• Box-decoration-break: box-decoration-clone and box-decoration-slice control how background, borders, and padding are rendered across line breaks, handy for text gradients.

<div class="mix-blend-multiply isolate">...</div>

In practice these utilities let you achieve complex visual effects with a single class list.

Which new display utilities were added in Tailwind CSS 2.1?

The release adds inline-table and list-item display utilities.

They fill gaps in the display spectrum, allowing you to render an element as an inline-level table or as a list item without writing custom CSS.

<div class="inline-table">...</div>
<li class="list-item">...</li>

Most teams will find these utilities useful when building complex table layouts or when resetting list styles.