v1.6.1

• Fixes an issue where animation keyframes weren't included in the build without @tailwind base (#2108)

v1.6.0

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
• New prefers-reduced-motion variants
• New overscroll-behavior utilities
• Generate your CSS without an input file

Animation support (#2068)

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:

// tailwind.config.js
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 (#2071)

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:

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

For more details, check out the updated variants documentation.

New overscroll-behavior utilities (#2075)

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:

// tailwind.config.js
module.exports = {
  // ...

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

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

Generate your CSS without an input file (#1861)

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 ❤️

v1.5.2

• Fixes issue where you could no longer use @apply with unprefixed class names if you had configured a prefix

v1.5.1

• Fixes accidental breaking change where adding component variants using the old manual syntax (as recommended in the docs) stopped working

v1.5.0

Tailwind CSS v1.5.0

I was hoping to save v1.5.0 for something really exciting (🌘) but we needed a new feature to support the new @tailwindcss/typography plugin so h*ck it, we're dropping some new stuff on you early. Enjoy! 🥳

No breaking changes, this is a minor release and we are professionals you silly goose. One accidental breaking change, fixed in v1.5.1. I take back everything I said about being professionals. I am the one who is the silly goose.

New Features

• Component variants support
• Responsive container variants
• New focus-visible variant
• New checked variant

Component variants support (#2031)

Until Tailwind CSS v1.5.0, only "utility" classes were really intended to be used with variants (like "responsive", "hover", "focus", etc.)

While these are still much more useful for utilities than any other type of class, we now support generating variants for component classes as well, like the prose classes in the new @tailwindcss/typography plugin:

<article class="prose md:prose-lg">
  <!-- Content -->
</article>

You can take advantage of this feature in your own component classes by using the new variants option in the second argumant of the addComponents plugin API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...or using the array shorthand you might be familiar with from the addUtilities API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

To take advantage of these feature in your custom CSS (rather than using the plugin API), you can use a new @layer directive to explicitly tell Tailwind that your styles belong to the "components" bucket:

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

This helps Tailwind purge your unused CSS correctly, ensuring it doesn't remove any responsive component variants when using the default "conservative" purge mode.

Responsive container variants (#2032)

Piggy-backing off of the new component variants support, the container class now supports variants!

<!-- Only lock the width at `md` sizes and above -->
<div class="md:container">
  <!-- ... -->
</div>

We've enabled responsive variants by default, but if you are sick in the head you can also manually enable other variants like focus, group-hover, whatever:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    container: ['responsive', 'focus', 'group-hover'],
  },
}

New focus-visible variant (#1824)

We've added support for the :focus-visible pseudo-class using a new focus-visible variant.

This is super useful for adding focus styles that only appear to keyboard users, and are ignored for mouse users:

<button class="focus-visible:outline-none focus-visible:shadow-outline ...">
  Click me
</button>

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'],
  },
}

Browser support is still pretty weak on this but getting better. In the mean time, check out the polyfill and corresponding PostCSS plugin if you'd like to use this in all browsers right away.

New checked variant (#1285)

We've added a new checked variant you can use to conditionally style things like checkboxes and radio buttons:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
}

v1.4.6

• Explicitly error when using a class as the important config option instead of just generating the wrong CSS (ad850ac)

v1.4.5

• Fix bug where the divideColor plugin was using the wrong variants in IE11 target mode

v1.4.4

• Fix bug where target: 'browserslist' didn't work, only target: ['browserslist', {...}] did (f5c0e30)

v1.4.3

• Don't generate unnecessary CSS in color plugins when color opacity utilities are disabled (#1680)

v1.4.2

• Fix issue where purge: { enabled: false } was ignored, add purge: false shorthand