How to override default motion-safe
#14441
Unanswered
peteragarclover
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi everyone! I love that this place exists 😍
I found a discussion (#11679) that asked and answered how to override default
focus-visible:
modifier by usingaddVariant
to redefine it.I want to do something similar to redefine
motion-safe:
to also check for a class. Our use case is we want to disable smooth scrolling for automated tests, somotion-safe:smooth-scroll
should only enable smooth scroll if bothprefers-reduced-motion: no-preference
and alsobody:not(.prefers-reduced-motion)
. A similar use case could be that you want this to be user configured. I.e. I want this feature to work similar to overriding dark mode selector https://tailwindcss.com/docs/dark-mode#overriding-the-dark-variant.I extended the playground link from the above discussion about
focus-visible:
and usedaddVariant
to try to overridemotion-safe
, however... I was not able to override the default. I could only add something with a different name likemotion-safe-new:
Is there a way to override the default? I worry that other people in our team will accidentally use the default documented one, and not know about custom alternative.
Demo in playground: https://play.tailwindcss.com/fO2j67HXoP?file=config
Credit to @wongjn for creating the playground that this was extended from and answering the original question.
Beta Was this translation helpful? Give feedback.
All reactions