How to use tailwindcss with nextjs image

Bug report

Describe the bug

Hello, I am trying to use tailwindcss in Nextjs project. But I can’t use my tailwind classes with Nextjs image component. Here’s my code.

To Reproduce

<Image
        src={img.img}
        alt="Picture of the author"
        width="200"
        height="200"
        className="h-56 w-56 object-cover"
    ></Image>

Expected behavior

Here I want to use tailwind classes instead of the height and width property of the nextjs 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? thanks in advance. Here is the error if I don’t use height and width property.

When I use layout = ‘fill’ property it shows only one picture. And if I use unsized property, then the following error is shown.

The problem here is that I always have to use height and width but I can’t make it to work with tailwindcss classes

Screenshots

System information

• OS: Windows
• Browser: chrome, safari
• Version of Next.js: 10.0.1
• Version of Node.js: e.g. 14.0.0
• Deployment: I still haven’t deployed yet

Additional context

Add any other context about the problem here.

[lveillard]

This only solves things when the width and height are fixed. The Image component completely ignores every tailwind class. For example

With classes: className=“order-first lg:order-last mb-8 lg:mb-0 max-h-96 max-w-3/4 mx-auto”

Gets transformed into this:

Setting up random width - height does not fix it, classes: "order-first lg:order-last max-h-96 max-w-3/4 are just being completely ignored.

Having the image under a div with those classes does not work neither.

[prantaDutta]

that’s because you are using layout=‘fill’. Just delete that and use height and width instead. Here’s my working code.

<Image
    src={img.img}
    alt="Picture of the author"
    width="200"
    height="200"
    className="object-contain"
></Image>