Using Tailwind CSS with Next.js Image Component

Outline how to integrate Tailwind CSS classes with Next.js Image components to create responsive and optimized images.

import Image from 'next/image';

export default function Avatar({ src, alt }) {
  return (
    <div className='h-32 w-32 md:h-48 md:w-48 lg:h-64 lg:w-64 relative'>
      {/* Next.js Image component inside a container where you can apply Tailwind CSS classes for responsive design */}
      <Image
        src={src}
        alt={alt}
        layout='fill' // Use 'fill' to ensure the image stretches to the container size
        objectFit='cover' // Equivalent to 'background-size: cover' in CSS
        className='rounded-full' // Tailwind CSS class for rounded images
      />
    </div>
  );
}

This code creates a functional React component using Next.js Image and Tailwind CSS. The 'Avatar' component receives 'src' and 'alt' props for the image source and alternative text. It uses a div with Tailwind responsive classes to define the size of the image container, and integrates the Image component with layout set to 'fill' and objectFit set to 'cover' to ensure the image covers the area properly while keeping the aspect ratio. A 'rounded-full' Tailwind class applies a circular mask to the image.