diff --git a/src/components/sidebar-menu.tsx b/src/components/sidebar-menu.tsx
index a862372ee..13011dfec 100644
--- a/src/components/sidebar-menu.tsx
+++ b/src/components/sidebar-menu.tsx
@@ -143,7 +143,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       }
     >
       <div
-        className={clsx('fixed inset-0 bg-gray-500 transition-opacity black:bg-gray-900 dark:bg-gray-700', {
+        className={clsx('fixed inset-0 bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
           'opacity-0': !sidebarVisible,
           'opacity-90': sidebarVisible,
         })}
@@ -155,7 +155,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
         <div
           className={
             clsx({
-              'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs transition-transform ease-in-out': true,
+              'flex flex-col flex-1 bg-white black:bg-black dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs no-reduce-motion:transition-transform ease-in-out': true,
               '!translate-x-0': sidebarVisible,
             })
           }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 707639804..a630ab7a6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,6 +7,7 @@ import plugin from 'tailwindcss/plugin';
 import { parseColorMatrix } from './tailwind/colors';
 
 const blackVariantPlugin = plugin(({ addVariant }) => addVariant('black', '.black &'));
+const reducedMotionPlugin = plugin(({ addVariant }) => addVariant('no-reduce-motion', '.no-reduce-motion &'));
 
 const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
@@ -109,6 +110,7 @@ const config: Config = {
     formsPlugin,
     typographyPlugin,
     blackVariantPlugin,
+    reducedMotionPlugin,
   ],
 };