HTML CODE

<div class="flex justify-center"><p class="font-bold text-[58px]">Title</p></div>
        <div class="grid grid-flow-row row-span-4 gap-[90px] mt-10">
            <div class="grid grid-flow-col col-span-2">
                <a href="#"><img class="h-[235px] w-[395px] bg-slate-50 rounded-[30px] relative left-[80px] border-2 border-black hover:rboxshad" src="./images/sz2.png" alt="img-sz"></a>
                <div class="h-[145px] w-[650px] rounded-[30px] relative top-[90px] right-[225px] bg-[#F0F0E1] border-2 border-black -z-20"></div>
            </div>
            ...
        </div>

CUSTOM CSS

.rboxshad{
    box-shadow: 8px 8px black;
}

Why can't i see the shadows for this image?

I'm trying to create a box containing an image with the neubrutalist aesthetic so that when the cursor is hovered over the image the shadow becomes visible, but the hover effect doesnt seem to work. the shadow is perfectly visible without using hover: so theres no problem with the .rboxshad class. what is possibly wrong here?

1. Custom Tailwind Utilities

Keep class hover:rboxshad

https://play.tailwindcss.com/V6m0guIaPb?file=css

@layer utilities {
  .rboxshad{
      box-shadow: 8px 8px black;
  }
}

2. Only use css :hover

Change class hover:rboxshad to rboxshad

https://play.tailwindcss.com/wzTndV9Lr2

.rboxshad:hover {
  box-shadow: 8px 8px black;
}