Add reduce-motion variant

[adamwathan]

Updated 2020-07-27:

This PR adds new motion-reduced and motion-safe variants that allow you to conditionally apply CSS based on the prefers-reduced-motion media feature.

It 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-reduced:transition-none ...">

...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 ...">

Generally I think motion-safe is the better approach, but I've included both for completeness.

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

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

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

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

This is the first example of "stackable" variants in Tailwind and is something we may expose to plugin authors in the future, but for now is just hardcoded for these core variants while we work out the internal details.

[adamwathan]

One limitation I should mention, due to how Tailwind is currently designed, these variants can not be stacked with regular variants like hover, so you can't do this:

reduce-motion:hover:transition-none

I bet this won't be a real issue in practice but it is a bit annoying, and this limitation will be really annoying when we start working on dark mode :/ not sure how to solve without a breaking change to how variants work.

Edit: Solved in latest update.

[menthol]

One limitation I should mention, due to how Tailwind is currently designed, these variants can not be stacked with regular variants like hover, so you can't do this:

reduce-motion:hover:transition-none

I bet this won't be a real issue in practice but it is a bit annoying, and this limitation will be really annoying when we start working on dark mode :/ not sure how to solve without a breaking change to how variants work.

Start to think about a 2.0 version with the breaking changes needed for the future.