npm tailwindcss 2.1.0

latest releases: 0.0.0-insiders.fc25299, 0.0.0-insiders.6c63f67, 0.0.0-insiders.0313f02...
13 months ago

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.

Don't miss a new tailwindcss release

NewReleases is sending notifications on new releases.