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

Published on by

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

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)
Paul Redmond photo

Staff writer at Laravel News. Full stack web developer and author.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

image
Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Visit Paragraph
Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. We ♥ Laravel

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
Bacancy - Staff Augmentation logo

Bacancy - Staff Augmentation

Leave your web app development hustles to the leading IT Staff Augmentation Service Providers. Choose from an extensive pool of 1050+ developers and give yourself the sigh of success you deserve with Bacancy. Get In Touch Today!

Bacancy - Staff Augmentation
DocuWriter.ai logo

DocuWriter.ai

Save hours of manually writing Code Documentation, Comments & DocBlocks, Test suites and Refactoring.

DocuWriter.ai
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector

The latest

View all →
October CMS v3.6 Ships Today, Full of New Features image

October CMS v3.6 Ships Today, Full of New Features

Read article
Laracon EU Videos are now out image

Laracon EU Videos are now out

Read article
Use Google's Gemini AI in Laravel image

Use Google's Gemini AI in Laravel

Read article
PhpStorm is getting a brand new terminal image

PhpStorm is getting a brand new terminal

Read article
Six Essential Plugins for Visual Studio Code image

Six Essential Plugins for Visual Studio Code

Read article
Modularize Your Laravel Application With the Modular Package image

Modularize Your Laravel Application With the Modular Package

Read article