Search code examples
htmlcsshovertailwind-csstailwind-3

Why is the hover effect not working[Tailwind CSS]

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?

Solution
    1. Custom Tailwind Utilities

    Keep class hover:rboxshad

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

    @layer utilities {
  .rboxshad{
      box-shadow: 8px 8px black;
  }
}
    1. Only use css :hover

    Change class hover:rboxshad to rboxshad

    https://play.tailwindcss.com/wzTndV9Lr2

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