Tailwind: `content` does not exist in `MenuPassThroughOption`

[Dalorzo]

https://github.com/primefaces/primereact/blob/a2a2f11716fc726bd929e4ad775fe2a1e000e55c/components/doc/menu/theming/tailwinddoc.js#L26C3-L34C12

content: ({ context }) => ({
            className: classNames(
                'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
                {
                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
                }
            )
        }),
        

Looks like it should be replaced with menuitem

[melloware]

yeah the docs don't match what is happening in the tailwind theme which is this..

    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',
        menu: {
            className: classNames('m-0 p-0 list-none', 'outline-none')
        },
        content: ({ state }) => ({
            className: classNames(
                'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
                {
                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': state.focused
                }
            )
        }),
        action: {
            className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative')
        },
        menuitem: {
            className: classNames('hover:bg-gray-200')
        },
        icon: 'text-gray-600 dark:text-white/70 mr-2',
        submenuheader: {
            className: classNames('m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none')
        },
        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
        transition: TRANSITIONS.overlay
    }

[melloware]

The core Tailwind theme already has this..

        menuitem: {
            className: classNames('hover:bg-gray-200')
        },

[melloware]

content and menuitem are both separate styles in the Menu.js code.

MenuItem

            const menuitemProps = mergeProps(
                {
                    id: key,
                    key,
                    className: classNames(item.className, cx('menuitem', { focused: focusedOptionIndex === key })),
                    style: sx('menuitem', { item }),
                    role: 'menuitem',
                    'aria-label': item.label,
                    'aria-disabled': item.disabled,
                    'data-p-focused': focusedOptionId() === key,
                    'data-p-disabled': item.disabled || false
                },
                ptm('menuitem')
            );

Content

            const contentProps = mergeProps(
                {
                    onClick: (event) => onItemClick(event, item, key),
                    className: cx('content')
                },
                ptm('content')
            );

[melloware]

OK please review my PR.