v2.2.5

Added

• Added self-baseline utility (I know this is a patch release, no one's going to die relax) (#5000)

Changed

• JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850))

  This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Please open an issue if anything related to shadows, rings, transforms, filters, or backdrop-filters seems to be behaving differently after upgrading.

Fixed

• Fix support for step-start and step-end in animation utilities (#4795))
• JIT: Prevent presence of !* in templates from ruining everything (#4816))
• JIT: Improve support for quotes in arbitrary values (#4817))
• Fix filter/backdrop-filter/transform utilities being inserted into the wrong position if not all core plugins are enabled (#4852))
• JIT: Fix @layer rules being mistakenly inserted during incremental rebuilds (#4853))
• Improve build performance for projects with many small non-Tailwind stylesheets (#4644)
• Ensure [hidden] works as expected on elements where we override the default display value in Preflight (#4873)
• Fix variant configuration not being applied to backdropOpacity utilities (#4892)

v2.2.4

Fixed

• Remove postinstall script that was preventing people from installing the library (1eacfb9)

v2.2.3

Added

• Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss (359252c)

Fixed

• JIT: Explicitly error when - is used as a custom separator (#4704)
• JIT: Don't add multiple ~ when stacking peer-* variants (#4757)
• Remove outdated focus style fix in Preflight (#4780)
• Enable purge if provided on the CLI (#4772)
• JIT: Fix error when not using a config file with postcss-cli (#4773)
• Fix issue with resolveConfig not being importable in Next.js pages (#4725)

v2.2.2

Fixed

• JIT: Reintroduce transform, filter, and backdrop-filter classes purely to create stacking contexts to minimize the impact of the breaking change (#4700)

v2.2.1

Fixed

• Recover from errors gracefully in CLI watch mode (#4693)
• Fix issue with media queries not being generated properly when using PostCSS 7 (#4695)

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)