DEV Community

Ekrem Günden
Ekrem Günden

Posted on

Tailwind CSS and Next/Image Z-index not working

#nextjs #tailwindcss #javascript #webdev

Image description

<div className="flex justify-between h-screen md:flex-row flex-col pt-64">
          ...
          <div className="z-50">
              <Image src="/Saly-14.svg" className="w-[916px] height-[1384px]" alt="" width={916} height={1384} />
          </div>
      </div>

<section className="bg-[#DBD9FF] z-30" id="services">
...
      </section>
Enter fullscreen mode Exit fullscreen mode

The name of this character is saly and even though I made it lower than the z-index of the section below, it still doesn't work. What could be the reason. Has anyone found a solution to a similar error before?

Top comments (1)

Collapse
 
designly profile image
Jay @ Designly • • Edited

You should upgrade to NextJS 13. They completely reworked next-image and it doesn't use that stupid <span> wrapper anymore. I bet that would fix your problem. For more information, check out Vercel's Upgrade Guide.