How to set Image width and height with tailwindcss in Next.js

[zhondori]

Hi. I have one small problem. When set width and height with tailwindcss classname, I got an error.

Unhandled Runtime Error Error: Image with src "/home-sect.svg" must use "width" and "height" properties or "layout='fill'" property.

Please, help me

[crswll]

It's asking you to set width and height properties (like react props), not just set a width and height on the element. You should set width={500} height={200} or somthing along those lines with the image's natual dimensions (won't worry, the values you set in CSS will overrides those). I'd definitely read the docs: https://nextjs.org/docs/api-reference/next/image#width

[h0lme3]

I think you wrote the code like this:

import Image from "next/image"
...
#I suppose, images are in public folder...
<Image src="/home-sect.svg" className="w-10 h-10" />
...

When you use next image, src, width and height are required props. So you need to use them properly. See the next doc: https://nextjs.org/docs/api-reference/next/image#required-props

import Image from "next/image"
...
<Image src="/home-sect.svg" width={40} height={40} />
...

Or you can import images assets folder not public folder in the root

import Image from "next/image"
import HomeSect from "assets/home-sect.svg"
...
<Image src={HomeSect} width={40} height={40} />
...

Hope you solve this problem... :D

[rimzzlabs]

Next.js provide image component to optimize image on the web.

If you are using Next Image, by default you need to set the image and width explicitly on the props component.

But if you want to set the width and style with tailwindcss (or any css), create a figure element or any other element like div as a parent element of the Next Image component, and set the parent element style to be relative, and then provide layout props on Image component to be fill.

example:

import NextImage from "next/image"

export default function Something(){
 return (
  <div className="relative w-40 h-40 md:w-64 md:h-64">
   <NextImage src="/home-sect.svg" alt="" layout="fill" className="rounded-lg" />
  </div>
 )
}

There you have an image wrapped inside a div, and the image should have different size based on different screen size by using tailwindcss utility

[Lu1815]

Just to update the information in here, now since 2023, instead of using the layout="fill" prop, we should use the "fill" prop, to set the width and height from the parent container, for example:

import NextImage from "next/image"
  
export default function Something(){
   return (
    <div className="relative w-40 h-40 md:w-64 md:h-64">
     <NextImage src="/home-sect.svg" alt="" fill className="rounded-lg" />
    </div>
)

[absolutegravitas]

this is so seriously stupid and designed to confuse newbies... set width /height which implies the gd height and width but it doesnt really set the size...