Update tailwindcss: 2.0.2 → 2.1.4 (minor)

[depfu]

Here is everything you need to know about this update. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ tailwindcss (2.0.2 → 2.1.4) · Repo · Changelog

Release Notes

2.1.4

Fixed

• Skip raw PurgeCSS sources when registering template dependencies (#4542)

2.1.3

Fixed

• Register PurgeCSS paths as PostCSS dependencies to guarantee proper cache-busting in webpack 5 (#4530)

2.1.2

Fixed

• Fix issue where JIT engine would generate the wrong CSS when using PostCSS 7 (#4078)

2.1.0

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
  • New filter and backdrop-filter utilities
  • New blending mode utilities
  • New isolation utilities
  • New box-decoration-break utilities
  • New inline-table and list-item display utilities

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.

2.0.4

Fixed

• Pass full var(--bg-opacity) value as opacityValue when defining colors as functions (d98f2f8)

2.0.3

Fixed

• Ensure sourcemap input is deterministic when using @apply in Vue components (#3356)
• Ensure placeholder opacity is consistent across browsers (#3308)
• Fix issue where theme() didn't work with colors defined as functions (#2919)
• Enable dark variants by default for color opacity utilities (#2975)

Added

• Add support for a tailwind.config.cjs file in Node ESM projects (#3181)
• Add version comment to Preflight (#3255)
• Add cursor-help by default (#3199)

Does any of this look wrong? Please let us know.

Commits

See the full diff on Github. The new version differs by more commits than we can show here.

---

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

All Depfu comment commands

@​depfu rebase

Rebases against your default branch and redoes this update

@​depfu recreate

Recreates this PR, overwriting any edits that you've made to it

@​depfu merge

Merges this PR once your tests are passing and conflicts are resolved

@​depfu close

Closes this PR and deletes the branch

@​depfu reopen

Restores the branch and reopens this PR (if it's closed)

@​depfu pause

Ignores all future updates for this dependency and closes this PR

@​depfu pause [minor|major]

Ignores all future minor/major updates for this dependency and closes this PR

@​depfu resume

Future versions of this dependency will create PRs again (leaves this PR as is)

[depfu]

Closed in favor of #1109.