Tailwind ui not taking up styles

[Namankataria01]

Here are the dropdown i am working on and the styles are not working is it a bug?

My dropdown file

`import { Menu } from '@headlessui/react'

const Dropdown =() => {
return (

<Menu.Button>More</Menu.Button>
<Menu.Items>
<Menu.Item>
{({ active }) => (
<a
className={${active && 'bg-blue-500'}}
href="/account-settings"
>
Account settings

)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
className={${active && 'bg-blue-500'}}
href="/account-settings"
>
Documentation

)}
</Menu.Item>
<Menu.Item disabled>
Invite a friend (coming soon!)
</Menu.Item>
</Menu.Items>

)
}
export default Dropdown;`

Here is my package.json

{ "name": "web", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@headlessui/react": "^1.7.3", "next": "12.3.1", "next-auth": "^4.12.3", "react": "18.2.0", "react-dom": "18.2.0" }, "devDependencies": { "autoprefixer": "^10.4.12", "eslint": "8.24.0", "eslint-config-next": "12.3.1", "postcss": "^8.4.17", "tailwindcss": "^3.1.8" } }