How to use Tailwind CSS with Next.js Image
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
.
Pranta
Updated on June 04, 2022Comments
-
Pranta almost 2 years
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
andwidth
property of the Next.js Image. But I can't because it throws me an error. Also,unsized
property throws another error saying it's deprecated. Is there any solution?Here is the error if I don't use the
height
andwidth
property.When I use the
layout='fill'
property it shows only one picture. And if I use theunsized
property, then the following error is shown.