Tailwind CSS 2.2: What's New, Release History & EOL Status

What Is New in Tailwind CSS 2.2

How does the new Tailwind CLI improve the development workflow?

The new CLI lets you compile Tailwind without any configuration files.

• Run

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

  from any directory.
• Watch mode automatically rebuilds CSS on file changes.
• Use --minify to pipe the output through cssnano for production-ready files.
• PostCSS plugins are respected via a postcss.config.js file, so you can keep your existing pipeline.

In practice this means fewer moving parts and faster JIT builds because the CLI is Tailwind-specific.

How can I style pseudo-elements and advanced selectors with Tailwind 2.2?

Tailwind now ships first-party variants for ::before, ::after, ::first-letter, ::first-line, ::selection, ::marker, and sibling selectors.

• before: and after: add content and styling, e.g.

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

• Use first-letter: for drop caps: first-letter:text-4xl first-letter:font-bold.
• Apply a global text highlight with selection:bg-pink-200 on body to cascade.
• Style list bullets via marker:text-gray-500.
• Target previous siblings using peer-* variants, e.g. peer-checked:bg-blue-500 for custom checkboxes.
• All missing pseudo-classes like placeholder-shown, only-child, valid, etc., are now available.

This matters if you need fine-grained UI polish without writing custom CSS.

What's new with color opacity and arbitrary values in Tailwind 2.2?

Tailwind now supports opacity directly in color utilities and far more arbitrary value syntax.

• Shorthand opacity: bg-red-500/25 replaces bg-red-500 bg-opacity-25.
• Arbitrary opacity via brackets: bg-red-500/[0.31].
• Arbitrary values can be used on almost any utility: col-start-[73] placeholder-[#aabbcc] object-[50%].
• When using CSS variables, add a type hint: text-[color:var(--mystery-var)] to disambiguate.

In practice this reduces class noise and lets you fine-tune designs on the fly.

How have transforms, filters, and border utilities changed in Tailwind 2.2?

Transform and filter utilities are now auto-enabled, and per-side border colors have been added.

• Drop the transform and filter wrappers: <div class="scale-50 grayscale backdrop-blur-sm">.
• If you previously toggled transform on hover, switch to toggling the sub-utility directly, e.g. hover:scale-105.
• New per-side border color utilities: border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500.
• Caret color utilities: caret-red-500 for form field cursors.
• Background origin utilities: bg-origin-border, bg-origin-padding, bg-origin-content.

Watch out for the breaking change around implicit transform/filter activation when migrating existing conditional classes.