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

What Is New in Tailwind CSS 1.6

How do I add ready-made animations with Tailwind CSS 1.6?

Tailwind CSS 1.6 ships with an animation core plugin that provides four utility classes out of the box.

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

These utilities can be dropped onto any element, for example a loading spinner:

<button type="button" class="bg-indigo-600 ...">
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

You can also define custom animations and keyframes in tailwind.config.js under the animation and keyframes sections.

How can I respect users' prefers-reduced-motion setting in Tailwind CSS?

Tailwind CSS 1.6 introduces motion-safe and motion-reduce variants that hook into the prefers-reduced-motion media feature.

Use motion-reduce to disable motion for sensitive users, or motion-safe to only enable motion when the user has not opted out.

Example of disabling a transition for reduced-motion users:

<div class="transition duration-150 ease-in-out motion-reduce:transition-none">...</div>

Enable the variants in your config:

// tailwind.config.js
module.exports = {
  variants: {
    translate: ['responsive', 'hover', 'focus', 'motion-safe', 'motion-reduce'],
  },
}

These variants can be combined with responsive and pseudo-class variants for fine-grained control.

What utilities does Tailwind CSS 1.6 provide for controlling overscroll behavior?

Tailwind CSS 1.6 adds utilities for the CSS overscroll-behavior property, letting you prevent scroll chaining in nested scroll containers.

Apply overscroll-y-contain (or the X-axis equivalents) to a scrollable element:

<div class="overscroll-y-contain ...">
  <!-- scrollable content -->
</div>

The utilities are a progressive enhancement; they are not supported in Safari but gracefully degrade.

You can disable the plugin or customize its variants in tailwind.config.js:

// Disable the plugin
module.exports = {
  corePlugins: {
    overscrollBehavior: false,
  },
}

Can I generate Tailwind CSS output without creating a CSS input file?

Yes. The Tailwind CLI now makes the input file argument optional, so you can build directly to a CSS file.

Run the following command and Tailwind will emit the base, components, and utilities layers automatically:

npx tailwindcss build -o compiled.css

This saves you from maintaining a trivial @tailwind import file when you don't need custom CSS.