Tailwind CSS v2.1 is now released

Tailwind v2.1 was just released with a new JIT Engine, Filter and Backdrop-filter Utilities, and more. Let's take a look at some of the new features.

JIT Engine

A few weeks ago, the Tailwind team released a package they were using to expiriment with a just-in-time compiler for Tailwind. With the release of Tailwind v2.1, the JIT compiler is included in Tailwind core. Just add mode: 'jit' to your Tailwind config file and configure the purge property to scan your markup.

1// tailwind.config.js
2module.exports = {
3  mode: 'jit',
4  purge: [
5    // ...
6  ],
7  // ...
8}

Filter and Backdrop-filter Utilities

filter and backdrop-filter utilities have been added. These additions have a composable API similar to the transform utiltiies in Tailwind. Apply the filter (or backdrop-filter) class and then you combine utilities for blur, brightness, contrast, drop-shadow, and other CSS filter properties. Check out the possibilities in the Tailwind docs.

1<div class="filter grayscale blur-md contrast-200">
2  <!-- ... -->
3</div>

Other New Features

In additon to the JIT compiler and filter utilities, new blending mode and isolation utiltities have been added. See more examples of the new features in the official release notes.