Tailwind CSS is not being applied in Shadcn component

Question

I'm making a DropdownMenu using Shadcn like so:

<DropdownMenu>
  <DropdownMenuTrigger className="outline-none">{displayName}</DropdownMenuTrigger>
  <DropdownMenuContent className="w-56 mr-10 bg-white text-black p-3 rounded">
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <span>Dashboard</span>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <span>Settings</span>
      </DropdownMenuItem>
      <DropdownMenuSeparator/>
      <DropdownMenuItem>
        <span>Log out</span>
      </DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

I want to make it so that each DropdownMenuItem uses the pointer cursor instead of the default cursor when hovering over the item. I went into dropdown-menu.tsx and modified DropdownMenuItem so that is uses cursor-pointer in the className:

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))

However the cursor remains as the default. For some reason the className changes I make in the Shadcn component aren't being applied. I've tried restarting my dev instance and also restarting VSCode but nothing seems to be working. My changes to other Shadcn components work, just not changes to dropdown-menu.tsx. Any ideas why this isn't working?

Doing className="cursor-pointer" to each individual DropdownMenuItem works, but ideally I would like it so that I can apply it to DropdownMenuItem itself, not just its instances.

Answer 1

Found what was wrong! I was importing all the Dropdown components from @radix-ui/react-dropdown-menu instead of from @/components/ui/dropdown-menu.