How to Properly Apply Tailwind CSS Styles to Next.js Image Component with Relative Positioning

  Kiến thức lập trình

I am trying to use the Next.js Image component in my React project with Tailwind CSS, but I am encountering issues with applying relative positioning styles and other specific styles like objectFit. The problem seems to stem from the container div that Next.js automatically creates around the img tag. Here is my current code:

<section style={{ position: 'relative', width: '100vw', height: '56.25vw', maxHeight: '500px' }}>
  <Image
    src={carouselItem.image}
    alt={`Slide ${carouselItem.text}`}
    layout="fill"
    objectFit="cover"
    className="object-cover object-center aspect-video"
  />
</section>

LEAVE A COMMENT