Skip to content

v2.1.0
Compare
Choose a tag to compare
@adamwathan adamwathan released this 05 Apr 18:43
· 1584 commits to master since this release
v2.1.0
8bce53b

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.

Assets 2