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
JIT engine in core (#3905)
The brand-new JIT engine we announced in March 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:
// 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.
New filter and backdrop-filter utilities (#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:
<div class="filter blur-md grayscale invert ...">
<!-- ... -->
</div>...and here's what backdrop-filter looks like:
<div class="backdrop-filter backdrop-blur backdrop-brightness-50 ...">
<!-- ... -->
</div>Check out the filter and backdrop-filter to learn more. We'll add a bunch of helpful visual examples there soon!
New blending mode utilities (#3920)
We've added brand new utilities for mix-blend-mode and background-blend-mode:
<div class="mix-blend-multiply ...">
<!-- ... -->
</div>Check out the documentation to learn more.
New isolation utilities (#3914)
We've added new isolate and isolation-auto utilities for working with the isolation property:
<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 to learn more.
I also highly recommend this great article by Josh Comeau to see it in action.
New box-decoration-break utilities (#3911)
We've added brand new utilities for the box-decoration-break property:
<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 and in the MDN article.
New inline-table and list-item display utilities (#3563, #3929)
We've added a couple display utilities we were missing:
<div class="inline-table ...">
<!-- ... -->
</div>
<div class="list-item ...">
<!-- ... -->
</div>Maybe not quite as exciting as the rest but a welcome addition nonetheless.