reactjs - Next Image not taking class properties

Question

I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with this.

<Image
  className="mt-3"
  data-testid="close-icon"
  src="/CloseIcon.svg"
  alt="Close Nav Bar"
  height="24"
  width="24"
/>

I am not sure why it is not working and it is not being reflected in the browser. Any help will be greatly appreciated!

Answer 1

Styling the next/image component this way currently doesn't work (see https://github.com/vercel/next.js/issues/18585).

As a workaround, you can add a wrapper element and apply the styling to it instead.

<div className="mt-3">
    <Image
        data-testid="close-icon"
        src="/CloseIcon.svg"
        alt="Close Nav Bar"
        height="24"
        width="24"
    />
</div>