diff --git a/components/doc/tabmenu/theming/tailwinddoc.js b/components/doc/tabmenu/theming/tailwinddoc.js
index 4c6cf8d1bc..c3f02614fc 100644
--- a/components/doc/tabmenu/theming/tailwinddoc.js
+++ b/components/doc/tabmenu/theming/tailwinddoc.js
@@ -6,20 +6,20 @@ export function TailwindDoc(props) {
     const code = {
         basic: `
 const Tailwind = {
-    tabmenu: {
+     tabmenu: {
         root: 'overflow-x-auto',
         menu: {
             className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
         },
         menuitem: 'mr-0',
-        action: ({ context, state }) => ({
+        action: ({ context, parent }) => ({
             className: classNames(
                 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
                 'border-b-2 p-5 font-bold rounded-t-lg ',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
                     'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
-                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
                 }
             ),
             style: { top: '2px' }
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index edcde0e4b5..41fcbe629f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -253,7 +253,7 @@ const Tailwind = {
         },
         tabpanel: {
             header: ({ props }) => ({
-                className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles.
+                className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props.disabled }) // Margin and condition-based styles.
             }),
             headerAction: ({ parent, context }) => ({
                 className: classNames(
@@ -675,7 +675,7 @@ const Tailwind = {
                 },
                 { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
                 { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
-                { 'opacity-60 pointer-events-none cursor-default': context?.disabled }
+                { 'opacity-60 pointer-events-none cursor-default': context.disabled }
             )
         }),
         label: ({ props }) => ({
@@ -981,9 +981,9 @@ const Tailwind = {
             className: classNames(
                 'transition-width duration-1000 ease-in-out h-full',
                 {
-                    'bg-red-500': state.meter?.strength == 'weak',
-                    'bg-orange-500': state.meter?.strength == 'medium',
-                    'bg-green-500': state.meter?.strength == 'strong'
+                    'bg-red-500': state.meter.strength == 'weak',
+                    'bg-orange-500': state.meter.strength == 'medium',
+                    'bg-green-500': state.meter.strength == 'strong'
                 },
                 { 'pr-[2.5rem] ': props.toggleMask }
             )
@@ -1306,7 +1306,7 @@ const Tailwind = {
     multiselect: {
         root: ({ props }) => ({
             className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
-                'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
         labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
@@ -1338,8 +1338,8 @@ const Tailwind = {
                 'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
-                    'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
-                    'border-blue-500 bg-blue-500': context?.selected
+                    'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context.selected,
+                    'border-blue-500 bg-blue-500': context.selected
                 }
             )
         }),
@@ -1374,8 +1374,8 @@ const Tailwind = {
                 'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
-                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected,
-                    'border-blue-500 bg-blue-500': context?.selected
+                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context.selected,
+                    'border-blue-500 bg-blue-500': context.selected
                 }
             )
         }),
@@ -1429,7 +1429,7 @@ const Tailwind = {
     treeselect: {
         root: ({ props }) => ({
             className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
-                'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
         labelContainer: {
@@ -1866,8 +1866,8 @@ const Tailwind = {
                 'flex-col top-full left-0',
                 'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
                 {
-                    'hidden ': !state?.mobileActive,
-                    'flex ': state?.mobileActive
+                    'hidden ': !state.mobileActive,
+                    'flex ': state.mobileActive
                 }
             )
         }),
@@ -2068,14 +2068,14 @@ const Tailwind = {
             className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
         },
         menuitem: 'mr-0',
-        action: ({ context, state }) => ({
+        action: ({ context, parent }) => ({
             className: classNames(
                 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
                 'border-b-2 p-5 font-bold rounded-t-lg ',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 {
                     'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
-                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
                 }
             ),
             style: { top: '2px' }
@@ -2343,7 +2343,7 @@ const Tailwind = {
     tree: {
         root: ({ props }) => ({
             className: classNames('max-w-[30rem] md:w-full', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5', {
-                'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata?.parent.props.__TYPE !== 'TreeSelect'
+                'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata.parent.props.__TYPE !== 'TreeSelect'
             })
         }),
         wrapper: 'overflow-auto',
@@ -3170,12 +3170,12 @@ const Tailwind = {
                 className: classNames(
                     'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
                     'transition duration-200',
-                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
                     context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
                     context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
                     {
                         'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
-                        'border-x border-y': context?.showGridlines,
+                        'border-x border-y': context.showGridlines,
                         'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
                     }
                 )
@@ -3184,10 +3184,10 @@ const Tailwind = {
             bodycell: ({ props, context }) => ({
                 className: classNames(
                     'text-left border-0 border-b border-solid border-gray-300',
-                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
                     'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
                     {
-                        'sticky bg-inherit': props?.frozen || props?.frozen === '', // Frozen Columns
+                        'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns
                         'border-x border-y': context.showGridlines
                     }
                 )
@@ -3197,7 +3197,7 @@ const Tailwind = {
                     'text-left border-0 border-b border-solid border-gray-300 font-bold',
                     'bg-slate-50 text-slate-700',
                     'transition duration-200',
-                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.size === 'small' ? 'p-2' : context.size === 'large' ? 'p-5' : 'p-4', // Size
                     'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
                     {
                         'border-x border-y': context.showGridlines
@@ -3230,7 +3230,7 @@ const Tailwind = {
                 className: classNames(
                     'm-0 py-3 px-5 bg-transparent',
                     'transition duration-200',
-                    context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
+                    context.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
                 )
             }),
             filteroperator: {
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index a44f10a702..6321523965 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -19,16 +19,21 @@ export const TabMenu = React.memo(
         const tabsRef = React.useRef({});
         const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
 
-        const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+        const metaData = {
             props,
             state: {
                 id: idState,
                 activeIndex: activeIndexState
             }
+        };
+
+        const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+            ...metaData
         });
 
         const getPTOptions = (key, item, index) => {
             return ptm(key, {
+                parent: metaData,
                 context: {
                     item,
                     index