v2.2.0

Tailwind CSS v2.2.0

Six weeks ago I didn't even have v2.2 on my roadmap and yet somehow here we are today, with one of the biggest Tailwind CSS feature releases of all-time?!

This release is loaded with tons of cool new stuff, mostly targeting the new Just-in-Time mode which unlocks so many cool ideas we probably couldn't have pulled off if we had to keep being mindful of the CSS file size in development.

To upgrade, install the latest version via npm:

npm install -D tailwindcss@latest

Note that we've had to make a couple small changes to the JIT engine as we've added features, fixed bugs, and improved the overall reliability, so make sure to read about the changes and deprecations when upgrading if you are using just-in-time mode.

• New features

  • All-new improved Tailwind CLI
  • Before and after variants
  • First-letter/line variants
  • Selected text variants
  • List marker variants
  • Sibling selector variants
  • Exhaustive pseudo-class support
  • Shorthand color opacity syntax
  • Extended arbitrary value support
  • Improved nesting support
  • Caret color utilities
  • Background origin utilities
  • Simplified transform and filter composition
  • Per-side border color utilities
  • Built-in safelist, transform, and extract support

• Changes and deprecations

• Fixes and improvements

---

New features

All-new improved Tailwind CLI (#4526, #4558)

We've rewritten the Tailwind CLI tool from the ground-up with a performance-first mindset, while also adding support for a bunch of new features.

npx tailwindcss -o dist/tailwind.css --watch --jit --purge="./src/**/*.html"

Here are some of the highlights:

• No installation or configuration necessary — simply npx tailwindcss -o output.css to compile Tailwind from anywhere. You can even enable JIT mode with the --jit flag and pass in your content files using the --purge option, all without creating a config file.
• Watch mode — so you can automatically rebuild your CSS whenever you make any changes.
• JIT performance optimizations — since our CLI is Tailwind-specific we've been able to make tons of optimizations that make it the absolute fastest build tool for compiling your CSS in JIT mode.
• Minification support — now you can minify your CSS with cssnano just by adding the --minify flag.
• PostCSS plugin support — the new CLI will read and respect any extra plugins you configure using a postcss.config.js file.

It's fully backwards-compatible with the previous CLI, so if you've got any scripts set up already you should be able to upgrade to v2.2 without making any changes to your scripts.

Check out our updated Tailwind CLI documentation to learn more.

Note that if you were using the tailwindcss-cli wrapper package, you can safely switch to tailwindcss as we've managed to resolve the peer-dependency issues that forced us to create the wrapper package in the first place.

Before and after pseudo-element variants (#4461)

This feature is only available in Just-in-Time mode.

People have been asking for this for years and it's finally here! We've added first-party support for styling pseudo-elements like before and after:

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>

We set content: "" automatically any time you use a before or after variant to make sure the elements are rendered, but you can override it using the new content utilities which have full arbitrary value support:

<div class="before:content-['hello'] before:block ..."></div>

You can even grab the content from an attribute using the CSS attr() function:

<div before="hello world" class="before:content-[attr(before)] before:block ..."></div>

This can be super helpful when your content has spaces in it, since spaces can't be used in CSS class names.

First-letter/line variants (#4482)

This feature is only available in Just-in-Time mode.

We've added variants for the first-letter and first-line pseudo-elements, so you can do stuff like drop caps:

<p class="first-letter:text-4xl first-letter:font-bold first-letter:float-left">
  The night was March 31, 1996, and it was finally time for Bret Hart to face off against Shawn
  Michaels in the long anticipated Iron Man match — a 60 minute war of endurance where the man who
  scored the most number of falls would walk away as the WWF World Heavyweight Champion.
</p>

Selected text variants (#4482)

This feature is only available in Just-in-Time mode.

We've added a new selection variant that makes it super easy to style highlighted to match your design:

<p class="selection:bg-pink-200">
  After nearly a grueling hour of warfare with neither man scoring a fall, Hart locked in the
  Sharpshooter, his signature submission hold. As Michaels screamed in pain, the crowd were certain
  that Hart was about to walk away from WrestleMania XII as the still-World Heavyweight Champion.
</p>

We've even built this feature in such a way that it can be applied to a parent element and cascade down, so you can set a highlight color for your whole site by applying a utility to the body:

<body class="selection:bg-pink-200">
  <!-- ... -->
  <p>
    But Michaels didn't give up — he held on until the bell rang and the designated 60 minutes was
    up. Hart walked away content, thinking that without a clear winner, the title was his to hold.
    He was not prepared for what would happen next, when Gorilla Monsoon declared the match would
    continue under sudden death rules.
  </p>
</body>

List marker variants (#4482)

This feature is only available in Just-in-Time mode.

You can use the new marker variant to style the bullets or numbers at the beginning of a list:

<h1>WrestleMania XII Results</h1>

<ol class="marker:text-gray-500 marker:font-medium">
  <li>
    The British Bulldog, Owen Hart, and Vader defeated Ahmed Johnson, Jake Roberts, and Yokozuna
  </li>
  <li>Roddy Piper defeated Goldust</li>
  <li>Stone Cold Steve Austin defeated Savio Vega</li>
  <li>The Ultimate Warrior defeated Hunter Hearst Helmsley</li>
  <li>The Undertaker defeated Diesel</li>
  <li>Shawn Michaels defeated Bret Hart</li>
</ol>

Like the selection variant, we've implemented this in a way that it cascades from the parent, so you don't have to repeat it for each list item.

Sibling selector variants (#4556)

This feature is only available in Just-in-Time mode.

Tailwind CSS v2.2 adds new peer-* variants that behave much like the group-* variants, but for targeting sibling elements instead of parent elements.

This is useful for things like styling an element when a preceding checkbox is checked, doing things like floating labels, and lots more:

<label>
  <input type="checkbox" class="peer sr-only">
  <span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
  <!-- ... -->
</label>

Just like group can be combined with any other variant, peer can as well, so you have variants like peer-hover, peer-focus, peer-disabled, and loads more at your fingertips.

The generated CSS uses the general sibling combinator and looks like this:

.peer:checked ~ .peer-checked\:bg-blue-500 {
  background-color: #3b82f6;
}

So just like in vanilla CSS, it will only work for targeting previous siblings, not siblings that appear later in the DOM.

Exhaustive pseudo-class support (#4482)

This feature is only available in Just-in-Time mode.

We've added variants for basically every single missing pseudo-class we could think of in this release:

• only (only-child)
• first-of-type
• last-of-type
• only-of-type
• target
• default
• indeterminate
• placeholder-shown
• autofill
• `requ...

v2.1.4

Fixed

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

v2.1.3

Fixed

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

v2.1.2

Fixed

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

v2.1.1

Fixed

• Fix issue where JIT engine would fail to compile when a source path isn't provided by the build runner for the current input file (#3978)

v2.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.

v2.0.4

Fixed

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

v2.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)

v2.0.2

Fixed

• Fix issue with @apply not working as expected with !important inside an at-rule (#2824)
• Fix issue with @apply not working as expected with defined classes (#2832)
• Fix memory leak, and broken @apply when splitting up files (#3032)

Added

• Add default values for the ring utility (#2951)

v2.0.1

• Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags.