How to use Tailwind CSS with Next.js Image

cafe_carl

I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component. Here's my code: <Image src={img.img} alt="Picture of the author" width="200" height="200" className="bg-mint text-mint fill-current" ></Image> I want to use Tailwind classes instead of the height and width property of the Next.js Image. But I can't because it throws me an error. Also, unsized property throws another error...

Originally asked by Pranta on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

There’s a discussion and related example over at the Next.js GitHub project. It sounds like that example achieves what you want to do. tl;dr: <div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking <Image src={img.img} alt="Picture of the author" layout="fill" // required objectFit="cover" // change to suit your needs className="rounded-full" // just an example /> </div> The image will preserve its original aspect ratio and fill / cover (or whatever object-fit you chose) the size of the outer div , which you can set using Tailwind classes. Other styles, like rounded corner, can be applied to the Image .

Full answer by tjanson: https://stackoverflow.stackexchange.com/a/65134645 (CC BY-SA 4.0).

Need it done for your business? UphillTech.