Tailwind CSS v2.1.0 — Release Notes & Engineering Impact

# Tailwind CSS v2.1.0 The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! - [New features](#new-features) - [JIT engine in core](#jit-engine-in-core) - [New `filter` and `backdrop-filter` utilities](#new-filter-and-backdrop-filter-utilities) - [New blending mode utilities](#new-blending-mode-utilities) - [New `isolation` utilities](#new-isolation-utilities) - [New `box-decoration-break` utilities](#new-box-decoration-break-utilities) - [New `inline-table` and `list-item` display utilities](#new-display-utilities) <a name="new-features"></a> ## New features <a name="jit-engine-in-core"></a> ### JIT engine in core ([#3905](https://github.com/tailwindlabs/tailwindcss/pull/3905)) The [brand-new JIT engine we announced in March](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) has now been merged into core, and is available as an opt-in feature using a new `mode` option in your `tailwind.config.js` file: ```js // tailwind.config.js module.exports = { mode: 'jit', purge: [ // ... ], // ... } ``` **This feature is still in preview** which means some details may change as we iron out the kinks, and it's not subject to semantic versioning. If you were using `@tailwindcss/jit` before, you can now migrate to Tailwind CSS v2.1 instead, as that's where all new development on the engine will happen. <a name="new-filter-and-backdrop-filter-utilities"></a> ### New `filter` and `backdrop-filter` utilities ([#3923](https://github.com/tailwindlabs/tailwindcss/pull/3923)) This is a huge one — we've finally added first-class support for CSS filters! They work a lot like our `transform` utilities, where you use `filter` to enable filters, and combine it with utilities like `grayscale`, `blur-lg`, or `saturate-200` to compose filters on the fly. Here's what `filter` looks like: ```html <div class="filter blur-md grayscale invert ..."> <!-- ... --> </div> ``` ...and here's what `backdrop-filter` looks like: ```html <div class="backdrop-filter backdrop-blur backdrop-brightness-50 ..."> <!-- ... --> </div> ``` Check out the [filter](https://tailwindcss.com/docs/filter) and [backdrop-filter](https://tailwindcss.com/docs/backdrop-filter) to learn more. We'll add a bunch of helpful visual examples there soon! <a name="new-blending-mode-utilities"></a> ### New blending mode utilities ([#3920](https://github.com/tailwindlabs/tailwindcss/pull/3920)) We've added brand new utilities for `mix-blend-mode` and `background-blend-mode`: ```html <div class="mix-blend-multiply ..."> <!-- ... --> </div> ``` Check out [the documentation](https://tailwindcss.com/docs/mix-blend-mode) to learn more. <a name="new-isolation-utilities"></a> ### New `isolation` utilities ([#3914](https://github.com/tailwindlabs/tailwindcss/pull/3914)) We've added new `isolate` and `isolation-auto` utilities for working with the `isolation` property: ```html <div class="isolate ..."> <!-- ... --> </div> ``` This can be really helpful for scoping blending mode features or z-index adjustments and is super powerful. Check out [the documentation](https://tailwindcss.com/docs/isolation) to learn more. I also highly recommend [this great article by Josh Comeau](https://www.joshwcomeau.com/css/stacking-contexts/#airtight-abstractions-with-isolation) to see it in action. <a name="new-box-decoration-break-utilities"></a> ### New `box-decoration-break` utilities ([#3911](https://github.com/tailwindlabs/tailwindcss/pull/3911)) We've added brand new utilities for the `box-decoration-break` property: ```html <div class="mix-blend-multiply ..."> <!-- ... --> </div> ``` It's a bit of an obscure one but it can be really useful alongside text gradients. Learn more in [our documentation](https://tailwindcss.com/docs/box-decoration-break) and in [the MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break). <a name="new-display-utilities"></a> ### New `inline-table` and `list-item` display utilities ([#3563](https://github.com/tailwindlabs/tailwindcss/pull/3563), [#3929](https://github.com/tailwindlabs/tailwindcss/pull/3929)) We've added a couple display utilities we were missing: ```html <div class="inline-table ..."> <!-- ... --> </div> <div class="list-item ..."> <!-- ... --> </div> ``` Maybe not quite as exciting as the rest but a welcome addition nonetheless.