How can I override the motion-safe: and motion-reduced: query variants 😬

[kylemh]

I know this sounds awful, but hear me out:

I have an unique situation where we have an app that has many internal products within it. Amazon Workspace users are all scoped to one of the products, and they all seem to all have animations turned off by default on their virtual Windows PC and dont even realize it (probably a sad reminder that many sites in the world already ignore this nice accessibility feature).

I do want to strictly adhere to motion-safe: and motion-reduce: selectors in the codebase; however, I was hoping I can somehow kill those selectors if it's scoped behind some sort of element using a specific data attribute? Or if somebody has some other idea?

I know the users of Amazon Workspace are able-bodied and able-visioned because it's a requirement to the role. To be fair... I'm not certain that somebody doesn't get motion sickness seeing animations and that could be a negative consequence of this action. I'm just trying to tout the line between product reqs and accessbility and looking for some sort of solution.

I thought that a less niche situation where this question is also relevant is for people who want to allow for in-app user preferences to control animations in an app or apps instead of the media query.

[wongjn]

You can add a custom variant using the same variant names - motion-safe and motion-reduce - to override them. For example:

@custom-variant motion-safe {
  @media (prefers-reduced-motion: no-preference) {
    @slot;
  }
  &:where([data-ignore], [data-ignore] *) {
    @slot;
  }
}

@custom-variant motion-reduce {
  @media (prefers-reduced-motion: reduce) {
    @slot;
  }
  &:where([data-ignore], [data-ignore] *) {
    @slot;
  }
}

[kylemh]

huge! i had no clue about @slot so i couldn't figure out how to get custom variants to save me. still my favorite part of tailwindcss@4