src/blog/tailwindcss-2-1/index.mdx
import { CodeExample, CodeBlock, Example, Figure } from "@/components/code-example"; import Link from "next/link"; import { Image } from "@/components/media"; import card from "./card.jpg"; import { adamwathan } from "@/app/blog/authors";
export const meta = {
title: "Tailwind CSS v2.1",
description: We just released Tailwind CSS v2.1 which brings the new JIT engine to core, adds first-class CSS filter support, and more!,
date: "2021-04-05T19:00:00.000Z",
authors: [adamwathan],
image: card,
excerpt: (
<>
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.
</>
),
};
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, <Link href="https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.1.0">check out the release notes</Link> on GitHub.
<a name="jit-engine-in-core"></a>
The <Link href="https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css">brand-new JIT engine we announced in March</Link> 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 <Link href="https://v2.tailwindcss.com/docs/just-in-time-mode">Just-in-Time Mode documentation</Link> to learn more.
<a name="new-filter-and-backdrop-filter-utilities"></a>
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.
<div class="blur-md grayscale invert filter ...">
<!-- ... -->
</div>
...and here's what backdrop-filter looks like:
<div class="backdrop-blur backdrop-brightness-50 backdrop-filter ...">
<!-- ... -->
</div>
Check out the <Link href="https://v2.tailwindcss.com/docs/filter">filter</Link> and <Link href="https://v2.tailwindcss.com/docs/backdrop-filter">backdrop-filter</Link> to learn more. We'll add a bunch of helpful visual examples there soon!
<a name="new-blending-mode-utilities"></a>
We've added brand new utilities for mix-blend-mode and background-blend-mode:
<div class="mix-blend-multiply ...">
<!-- ... -->
</div>
Check out <Link href="https://v2.tailwindcss.com/docs/mix-blend-mode">the documentation</Link> to learn more.
<a name="new-isolation-utilities"></a>
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 <Link href="https://v2.tailwindcss.com/docs/isolation">the documentation</Link> to learn more.
I also highly recommend <Link href="https://www.joshwcomeau.com/css/stacking-contexts/#airtight-abstractions-with-isolation">this great article by Josh Comeau</Link> to see it in action.
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? <Link href="https://npmjs.com/tailwindcss">Get it from npm →</Link>
This migration ensures the content adheres to the new v4 format, utilizing the components and codes specified for examples, excerpts, and code blocks.