MenuItem's focus doesn't work at all in the latest version

[RajatSatashiya]

Package: @headlessui/react
Version: v2.2.0, v2.1.10
For example: Chrome

Code (same as you have provided in your documentation)

import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

const links = [
  { href: '/settings', label: 'Settings' },
  { href: '/support', label: 'Support' },
  { href: '/license', label: 'License' },
]

function Example() {
  return (
    <Menu>
      <MenuButton as={Fragment}>
        {({ active }) => <button className={clsx(active && 'bg-blue-200')}>My account</button>}
      </MenuButton>
      <MenuItems anchor="bottom">
        {links.map((link) => (
          <MenuItem key={link.href} as={Fragment}>
            {({ focus }) => (
              <a className={clsx('block', focus && 'bg-blue-100')} href={link.href}>
                {link.label}
              </a>
            )}
          </MenuItem>
        ))}
      </MenuItems>
    </Menu>
  )
}

I hover over one of the links and nothing happens, the blue color doesn't get activated.
The focus is not giving any value.

[RobinMalfait]

Hey!

This is likely a setup issue where Tailwind CSS is not running. You can verify in the browser that the classes are added to the DOM (but very likely won't have actual styles attached).

Make sure that Tailwind CSS is setup to also look at the file you are mentioning above. See: https://tailwindcss.com/docs/content-configuration

If I paste your code in CodeSandbox it works as expected: https://codesandbox.io/p/devbox/agitated-mopsa-mvn87l

[RajatSatashiya]

On another note, will I have to compulsorily use the menubutton for the "focus" to work, this is my use case basically:
user presses "/" key and the menu items become visible, the "focus" however doesn't work with that.