Tailwind CSS v2.1
- Date
- Author
- Adam Wathan@adamwathan
The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! We’ve merged the new JIT engine to core, added first-class support for composable CSS filters, added blending mode utilities, and a bunch more.
Here are some of the highlights:
For the full details, check out the release notes on GitHub.
JIT engine in core
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:
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.
Read the Just-in-Time Mode documentation to learn more.
Composable CSS filters API
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
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
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.
Upgrading
Tailwind CSS v2.1 is an incremental upgrade with no breaking changes, so to upgrade you just need to run:
npm install tailwindcss@latest
If you were previously using @tailwindcss/jit
, you can now switch back to tailwindcss
and update your PostCSS configuration accordingly.
Ready to upgrade? Get it from npm →