Tailwind CSS v1.6.0

It’s like Tailwind CSS v1.5 except now there’s animation support, overscroll utilities, and more!

There aren’t supposed to be any breaking changes here, but I thought that last time too. If I did break something, first person to report it gets a Tailwind shirt.

​New Features

​Animation support

Tailwind CSS v1.6 adds a brand new animation core plugin, with 4 general purpose animations included out of the box:

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

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

These are completely customizable as always, using the animation and keyframes sections of your tailwind.config.js theme:

module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}

For more information and a live demo, read the new animation documentation. For behind the scenes details about the design rationale, check out the pull request.

​New prefers-reduced-motion variants

To go along with the new animation features, we’ve also added new motion-safe and motion-reduce variants that allow you to conditionally apply CSS based on the prefers-reduced-motion media feature.

These can be useful in conjunction with transition and animation utilities to disable problematic motion for users who are sensitive to it:

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

…or to explicitly opt-in to motion to make sure it’s only being shown to users who haven’t opted out:

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

These can be combined with responsive variants and pseudo-class variants as well:

<!-- With responsive variants -->
<div class="sm:motion-reduce:translate-y-0"></div>

<!-- With pseudo-class variants -->
<div class="motion-reduce:hover:translate-y-0"></div>

<!-- With responsive and pseudo-class variants -->
<div class="sm:motion-reduce:hover:translate-y-0"></div>

These are currently not enabled for any utilities by default, but you can enabled them as needed in the variants section of your tailwind.config.js file:

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

For more details, check out the updated variants documentation.

​New overscroll-behavior utilities

We’ve also added new utilities for the overscroll-behavior property.

You can use these utilities to control how “scroll chaining” works in your sites, and avoid scrolling the whole page when you reach the top or bottom of an embedded scrollable area.

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

Note that this is currently not supported in Safari, but in my opinion it’s not a huge deal to treat this as a progressive enhancement anyways, since it falls back fairly gracefully.

This plugin can be configured in your tailwind.config.js file as overscrollBehavior:

module.exports = {
  // ...

  // Disabling the plugin
  corePlugins: {
    overscrollBehavior: false,
  },

  // Customizing the enabled variants
  variants: {
    overscrollBehavior: ['responsive', 'hover'],
  },
}

​Generate your CSS without an input file

If you never write any custom CSS and you’re sick of creating this file all the time…

@tailwind base;
@tailwind components;
@tailwind utilities;

…then I’ve got news for you baby — if you’re using our tailwindcss CLI tool you can start depositing those 58 characters into your savings account instead of wasting them on a pointless CSS file.

The input file argument is now optional in the CLI tool, so if you don’t actually need a custom CSS file, you can just write this:

npx tailwindcss build -o compiled.css

Your kids are going to be so grateful for the extra time you get to spend together.

Want to talk about this post? Discuss this on GitHub →