Motion safe by default

[dan-overton]

Is there a way to use motion-safe by default when using animations? i.e. by adding it to the theme?
I'd prefer not to have to remember to add it every time I add an animation to an element.

Apologies if this is in the docs, I couldn't see any obvious answer from looking around.

[wongjn]

You could create a Tailwind plugin which is a copy of the the core animation Tailwind plugin:

tailwindcss/src/corePlugins.js

Lines 993 to 1023 in 7361468

	animation: ({ matchUtilities, theme, config }) => {
	let prefixName = (name) => escapeClassName(config('prefix') + name)
	let keyframes = Object.fromEntries(
	Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
	return [key, { [`@keyframes ${prefixName(key)}`]: value }]
	})
	)
	matchUtilities(
	{
	animate: (value) => {
	let animations = parseAnimationValue(value)
	return [
	...animations.flatMap((animation) => keyframes[animation.name]),
	{
	animation: animations
	.map(({ name, value }) => {
	if (name === undefined || keyframes[name] === undefined) {
	return value
	}
	return value.replace(name, prefixName(name))
	})
	.join(', '),
	},
	]
	},
	},
	{ values: theme('animation') }
	)
	},

And add the motion-safe-equivalent media query to the generated rules.

[emattias]

I think wrapping transition and animation related classes in the motion-safe media query should be the default (with a variant to not have the mq) or atleast an option to make it so.

I implemented this plugin (using tw v3).

Since I couldnt find a way to make tw not add the default non mq version I had to add non mq overrides that set them to initial (for when the user doesnt have reduced motion enabled):

If someone knows of a way to stop tw from adding the default non mq wrapped transition and animation classes, let me know.

plugins: [
    plugin(function ({ addUtilities, theme }) {
      const config = theme('transitionDuration');
      const transitions = theme('transitionProperty');
      const animations = theme('animation');
      const timingFunctions = theme('transitionTimingFunction');

      const newUtilities = {};
      const initialUtilities = {}; // To store the non-media query versions
      const resetVal = 'initial';

      Object.keys(transitions).forEach((key) => {
        const cssKey =
          key === 'DEFAULT' ? 'transitionProperty' : `transition-${key}`;
        newUtilities[`.${cssKey}`] = {
          '@media (prefers-reduced-motion: no-preference)': {
            'transition-property': transitions[key],
            'transition-timing-function': timingFunctions['DEFAULT'],
            'transition-duration': config['DEFAULT'],
          },
        };
        initialUtilities[`.${cssKey}`] = {
          'transition-property': resetVal,
          'transition-timing-function': resetVal,
          'transition-duration': resetVal,
        };
      });

      Object.keys(animations).forEach((key) => {
        newUtilities[`.animate-${key}`] = {
          '@media (prefers-reduced-motion: no-preference)': {
            animation: animations[key],
          },
        };
        initialUtilities[`.animate-${key}`] = {
          animation: resetVal,
        };
      });

      Object.keys(config).forEach((key) => {
        const cssKey =
          key === 'DEFAULT' ? 'transitionDuration' : `duration-${key}`;
        newUtilities[`.${cssKey}`] = {
          '@media (prefers-reduced-motion: no-preference)': {
            'transition-duration': config[key],
          },
        };
        initialUtilities[`.${cssKey}`] = {
          'transition-duration': resetVal,
        };
      });

      const defaultTimingFunction = timingFunctions['DEFAULT'];
      newUtilities['.ease-default'] = {
        '@media (prefers-reduced-motion: no-preference)': {
          'transition-timing-function': defaultTimingFunction,
        },
      };
      initialUtilities['.ease-default'] = {
        'transition-timing-function': resetVal,
      };
      addUtilities(initialUtilities); // Add the non-media query versions with reset values

      addUtilities(newUtilities, {
        variants: ['responsive', 'hover', 'focus'],
      });
    })
]