Tailwind CSS 2.2 is Now Here With a New CLI and JIT Features

Tailwind v2.2 was just released with a brand-new Tailwind CLI tool, a ton of new features using the JIT engine, and more. Let's take a look at some of the new features.

#Brand New Tailwind CLI

The Tailwind team released a brand-new tailwindcss CLI from the ground-up, adding support for some nice features to make it convenient to work with Tailwind right away:

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

The above example from the release notes showcases a new watch mode, a --jit flag to build Tailwind with the JIT mode, and the --purge flag used to remove unused classes. The CLI is also backward-compatible with the previous CLI.

Check the updated CLI documentation to learn more about using this option to work with Tailwind without any external build tooling.

#Styling Pseudo Elements With JIT

Tailwind now has first-party support for styling pseudo elements using the just-in-time mode:

<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300"></div>
 
<!-- customize pseudo content value -->
<div class="before:content-['hello'] before:block ..."></div>

Thanks to the JIT compiler added to core in Tailwind CSS v2.1, many new features can leverage this feature without risking bloat to the overall weight of Tailwind builds. That being said, the JIT mode is required to use this feature.

#Sibling Selector Variants

New peer-* variants target sibling elements, which is useful for styling elements based on the state of other siblings. The example provided from the release notes is styling an element when a sibling checkbox is checked:

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

#Learn More

The Tailwind 2.2.0 release has quite a few new useful features, thanks largely to the JIT engine. You can see the complete list of new features and updates below and the diff between v2.1.4 and v2.2.0 on GitHub.

If you prefer visual learning, Simon Vrachliotis’s What’s New in Tailwind CSS v2.2 has you covered:

The following release notes are directly from the changelog:

#2.2.0

#Changed

• JIT: Use “tracking” context by default instead of “watching” context for improved reliability with most bundlers (#4514)

  Depending on which tooling you use, you may need to explicitly set TAILWIND_MODE=watch until your build runner has been updated to support PostCSS’s dir-dependency message type.

#Added

• Add background-origin utilities (#4117)
• Improve @apply performance in projects that process many CSS sources (#3178)
• JIT: Don’t use CSS variables for color utilities if color opacity utilities are disabled (#3984)
• JIT: Redesign matchUtilities API to make it more suitable for third-party use (#4232)
• JIT: Support applying important utility variants (#4260)
• JIT: Support coercing arbitrary values when the type isn’t detectable (#4263)
• JIT: Support for raw syntax in purge config (#4272)
• Add empty variant (#3298)
• Update modern-normalize to v1.1 (#4287)
• Implement theme function internally, remove postcss-functions dependency (#4317)
• Add screen function to improve nesting plugin compatibility (#4318)
• JIT: Add universal shorthand color opacity syntax (#4348)
• JIT: Add @tailwind variants directive to replace @tailwind screens (#4356)
• JIT: Add support for PostCSS dir-dependency messages in TAILWIND_DISABLE_TOUCH mode (#4388)
• JIT: Add per-side border color utilities (#4404)
• JIT: Add support for before and after pseudo-element variants and content utilities (#4461)
• Add new transform and extract APIs to simplify PurgeCSS/JIT customization (#4469)
• JIT: Add exhaustive pseudo-class and pseudo-element variant support (#4482)
• JIT: Add caret-color utilities (#4499)
• Rename lightBlue to sky, emit console warning when using deprecated name (#4513)
• New CLI with improved JIT support, --watch mode, and more (#4526, 4558)
• JIT: Add new peer-* variants for styling based on sibling state (#4556)
• Expose safelist as a top-level option under purge for both JIT and classic engines (#4580)
• JIT: Remove need for transform class when using classes like scale-*, rotate-*, etc. (#4604)
• JIT: Remove need for filter and backdrop-filter classes when using classes like contrast-*, backdrop-blur-*, etc. (#4614)
• Support passing a custom path for your PostCSS configuration in the Tailwind CLI (#4607)
• Add blur-none by default with intent to deprecate blur-0 (#4614)

#Fixed

• JIT: Improve support for Svelte class bindings (#4187)
• JIT: Improve support for calc and var in arbitrary values (#4147)
• Convert hsl colors to hsla when transforming for opacity support instead of rgba (#3850)
• Fix backdropBlur variants not being generated (#4188)
• Improve animation value parsing (#4250)
• Ignore unknown object types when hashing config (82f4eaa)
• Ensure variants are grouped properly for plugins with order-dependent utilities (#4273)
• JIT: Fix temp file storage when node temp directories are kept on a different drive than the project itself (#4044)
• Support border-opacity utilities alongside default border utility (#4277)
• JIT: Fix source maps for expanded @tailwind directives (2f15411)
• JIT: Ignore whitespace when collapsing adjacent rules (15642fb)
• JIT: Generate group parent classes correctly when using custom separator (#4508)
• JIT: Fix incorrect stacking of multiple group variants (#4551)
• JIT: Fix memory leak due to holding on to unused contexts (#4571)

#Internals

• Add integration tests for popular build runners (#4354)