diff --git a/components/doc/menu/theming/tailwinddoc.js b/components/doc/menu/theming/tailwinddoc.js
index 7a06c09f75..54442e1d73 100644
--- a/components/doc/menu/theming/tailwinddoc.js
+++ b/components/doc/menu/theming/tailwinddoc.js
@@ -5,6 +5,18 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
+export const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
 const Tailwind = {
     menu: {
         root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
diff --git a/components/doc/tieredmenu/theming/tailwinddoc.js b/components/doc/tieredmenu/theming/tailwinddoc.js
index 63a71d974e..2e8614e06f 100644
--- a/components/doc/tieredmenu/theming/tailwinddoc.js
+++ b/components/doc/tieredmenu/theming/tailwinddoc.js
@@ -5,6 +5,15 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
 const Tailwind = {
     tieredmenu: {
         root: {