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
Tinkerwell

Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell
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
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
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
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
Larafast: Laravel SaaS Starter Kit logo

Larafast: Laravel SaaS Starter Kit

Larafast is a Laravel SaaS Starter Kit with ready-to-go features for Payments, Auth, Admin, Blog, SEO, and beautiful themes. Available with Vue and Livewire stacks.

Larafast: Laravel SaaS Starter Kit
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

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

Rector

The latest

View all →
Asserting a JSON Response Structure in Laravel image

Asserting a JSON Response Structure in Laravel

Read article
Backpack turns 8 years old, celebrates with 40% discount image

Backpack turns 8 years old, celebrates with 40% discount

Read article
Create a DateTime from a Timestamp With this New Method Coming to PHP 8.4 image

Create a DateTime from a Timestamp With this New Method Coming to PHP 8.4

Read article
Neovim Plugin to for Navigating Laravel and Livewire Components image

Neovim Plugin to for Navigating Laravel and Livewire Components

Read article
Laravel Herd v1.7 is out with updates to the dump UI image

Laravel Herd v1.7 is out with updates to the dump UI

Read article
Share Error Package for Laravel's New Exception Page image

Share Error Package for Laravel's New Exception Page

Read article