How to use next/future/image with Tailwind CSS?

[Nefcanto]

Next.js Image is extremely difficult to work with. Either the old one or the new one. It's our entire team's opinion.
However, because of the optimizations it has, we still want to work with it.

We use Tailwind CSS to design our products.

Here's a sample code:

<div className="w-x h-x md:w-x1 md:h-y1 lg:w-x2 lg:h-y2">
    <Image
        src={data.imageUrl}
        width={x}
        height={y}
   />
</div>

As you can see, we specify width and height using the Tailwind system. But for <Image component, we only have one required width or height.

This causes problems. Because as we increase the screen's size, the container becomes bigger, but the image stays the same in size.

What can we do to solve this issue? How do you use Nextjs future image with Tailwind?

[spirobel]

how did you resolve the issue?

[Nefcanto]

@spirobel I have not solved it and the next.js team does not answer. They are extremely ignorant of the community. But since it's a trend that everyone uses we're using it too. We literally have to.

[saurabhsri108]

That's a bad reason to choose any technology to work, "Everybody does it so we must too". I hope that's not the technical reason why you picked it up and it was well thought out decision on the part of senior engineer.

Anyways, try removing width and height and then simply add layout='fill' and objectFit='cover' or objectFit='contain' whatever you wish. Don't remove the width and other properties from its parent and just add 'relative' tailwind css class in the parent as well.

[lack-of-gravitas]

rather than suggest an entirely different tech --- i suggest you refer to the docs which clearly state those props have been replaced in favour of style and className ....

[SukkaW]

next/future/image component returns a raw <img />. So why don't you add className to yout <Image /> like this:

<Image className="w-full h-auto" src={data.imageUrl} width={x} height={y} />

[Nefcanto]

@SukkaW the width and heigh are mandatory and they literally override the style.

[Nefcanto]

@SukkaW if that's the case, then I have said something wrong. Let me test it and see it in action, please. I'll come back with the results.

[Nefcanto]

@SukkaW Well, we are both right, and wrong. You're right, the browser gives higher priority to className. But you're wrong in that, it loads the image with that specific width and height first, and then scales it to that size. This means horrible UI. Because a small image would be stretched to cover a larger area because the image was loaded small in the first place.

[SukkaW]

@Nefcanto Ah. If I understand you correctly, you want to implement a layout=fill: Given a container with specific size, you want your image to stretch and fill the entire container.

Although layout=fill is only available in next/image, not in next/future/image, Next.js has provided some example about how to mimic the behavior of next/image:

https://nextjs.org/docs/api-reference/next/future/image#migration

And in your case, you only need two extra attributes: fill={true} and sizes="100vw"

<NextFutureImage src={} sizes="100vw" fill />

With fill={true}, width and height are not required anymore.

[Nefcanto]

@SukkaW the most important reason we or anyone uses next.js image is the optimization. To load smaller images for smaller screens and larger images for larger ones. I'm not sure if that 100vw breaks this advantage or not. Are you suggesting that we tell next.js to load 1028px images for a flexbox of 6 features or services that we want to introduce?

[rutikwankhade]

did you found the fix for it? i have been struggling to understand how this works

[lack-of-gravitas]

Also where is this documented --- none of this helps an early or new adopter of nextjs... smh

[victornevarezcbqa]

Next.js Image is extremely difficult to work with. Either the old one or the new one. It's our entire team's opinion. However, because of the optimizations it has, we still want to work with it.

We use Tailwind CSS to design our products.

Here's a sample code:

<div className="w-x h-x md:w-x1 md:h-y1 lg:w-x2 lg:h-y2">
    <Image
        src={data.imageUrl}
        width={x}
        height={y}
   />
</div>

As you can see, we specify width and height using the Tailwind system. But for <Image component, we only have one required width or height.

This causes problems. Because as we increase the screen's size, the container becomes bigger, but the image stays the same in size.

What can we do to solve this issue? How do you use Nextjs future image with Tailwind?

I found myself in a similar situation
What we did was to use the fill property, asign a size to the div parent and make use of the object-fit property althought it will get deprecated
It seems NextJS team have not fixed the use of object-fit with Tailwind (it simply does not work)

[victornevarezcbqa]

Sorry if it wasn't clear
We make use of the objectFit property from the Image component instead of the object-fit from Tailwind, the use of this last one has not been yet fixed

[DariusLukasukas]

Hi guys, I've come across this issue thread and it seems that I'm experiencing a problem quite similar to the one you've described here. I've searched through the existing discussions and documentation, but I haven't found a concrete answer or workaround yet.

In my case, the issue occurs when add < Image /> component inside div with style relative applied to it and do other style using tailwind. I have tried to specify fill and specify size, but unfortunately, the problem persists.

I wanted to check in with you to see if you've found a solution or workaround for this issue since your last update here. Any guidance or suggestions you may have would be greatly appreciated. If you need any further information or clarification about my specific scenario, please feel free to ask.

Looking forward to your response and hoping for a resolution soon. Thanks in advance for your help!

[victornevarezcbqa]

Next.js Image is extremely difficult to work with. Either the old one or the new one. It's our entire team's opinion. However, because of the optimizations it has, we still want to work with it.

We use Tailwind CSS to design our products.

Here's a sample code:

<div className="w-x h-x md:w-x1 md:h-y1 lg:w-x2 lg:h-y2">
    <Image
        src={data.imageUrl}
        width={x}
        height={y}
   />
</div>

As you can see, we specify width and height using the Tailwind system. But for <Image component, we only have one required width or height.

This causes problems. Because as we increase the screen's size, the container becomes bigger, but the image stays the same in size.

What can we do to solve this issue? How do you use Nextjs future image with Tailwind?

Well, I don't know if this helps you but I use the fill property from the component from NextJS, assign the parent div from the Image as relative and then assign the sizes and everything to the div
You cannot use h-full as height, as it will not work but you can use w-full
You always have to assign a height and a width ex: w-32 h-48
At last I assign either object-contain or object-cover to the classname of the Image (not the div) for it to keep ratios

[Theakayuki]

Heres a code example for the current solution:

<div className="w-x h-x relative"> //relative with the w-x and h-x lets you change the size with tailwind classes when using fill.
  <Image
    src={data.imageUrl}
    alt="User Image"
    fill
    // optional className for tailwind styling on img like border
   />
</div>

[jimmyzzxhlh]

It is quite disappointed to see that a basic component like Image is not well designed in an ecosystem mindset (i.e. tailwind + nextjs). Why do we need to specify the width and height in the first place? There is perhaps a valid reason but really it should play well with tailwindcss.

There should be a good, robust solution provided before throwing warnings to engineers:

Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

[PaulRBerg]

For anyone still dealing with this, I built a library called tw-next-image that exports a SmartImage component that can infer sizes from Tailwind classes:

// ❌ Before:
<Image
  src="/avatar.webp"
  sizes="(min-width: 1024px) 120px, 100px"
  className="size-25 lg:size-30"
/>

// ✅ After:
<SmartImage src="/avatar.webp" className="size-25 lg:size-30" />
// will auto-generate this → sizes="(min-width: 1024px) 120px, 100px"

It wraps next/image with fill mode, parses your Tailwind utilities, and generates the correct sizes. The package also exports a standalone inferImageSizes() function if you don't need the component.

• Source code: https://github.com/PaulRBerg/tw-next-image
• npm package: npm install tw-next-image