Image component from next/image and Tailwind CSS

Unanswered

Red-billed Tropicbird posted this in #help-forum

Red-billed TropicbirdOP

2023-09-21T20:40:37.000Z

Hi,

I want to use the Image component from Next/Image, and style it with Tailwind CS. But it does not seem to be working properly because it expects me to either specify the width and height if I use the source directly in the image component, or it will figure out the size automatically if I import it in the file on top as seen below:

import Image from 'next/image'
import adamwathan from '../public/adamwathan.jpeg'

export default function Home() {
  return (
    <div className='bg-gray-700 text-white min-h-screen flex items-center justify-center'>
      <Image src={adamwathan} alt='test' className='rounded-full w-10 h-10' />
    </div>
  )
}

Using the w-10 h-10 on className with Tailwind CSS yields no change.

66 Replies

Morgan

2023-09-21T20:50:01.000Z

First, what physical size is the image?
Second, what happens if you remove the flex class from its parent?

@Morgan First, what physical size is the image? Second, what happens if you remove the flex class from its parent?

Red-billed TropicbirdOP

2023-09-21T20:51:53.000Z

460x460

Morgan

2023-09-21T20:52:30.000Z

You might need to set a max-width on the image

@Morgan You might need to set a max-width on the image

Red-billed TropicbirdOP

2023-09-21T20:53:05.000Z

Removng flex just moves the image to the left top corner

Morgan

2023-09-21T20:53:16.000Z

Ok. Is there one already? Eg max-width: 100%?

Red-billed TropicbirdOP

2023-09-21T20:53:18.000Z

instead of being center

@Morgan Ok. Is there one already? Eg max-width: 100%?

Red-billed TropicbirdOP

2023-09-21T20:53:33.000Z

Nope, I only wrote what is in the code

Should I try max-width?

Morgan

2023-09-21T20:54:11.000Z

Always use max-width: 100% height: auto as defaults on images otherwise they overflow.

!isColonel

2023-09-21T20:54:26.000Z

@Morgan Always use max-width: 100% height: auto as defaults on images otherwise they overflow.

Red-billed TropicbirdOP

2023-09-21T20:54:27.000Z

e.g. as part of tailwind className?

@!isColonel Click to see attachment

!isColonel

2023-09-21T20:54:43.000Z

Required Props

@!isColonel **Required Props**

Red-billed TropicbirdOP

2023-09-21T20:55:16.000Z

Yea they are required, but if that is the case then I will just regular old img html tag

since I want to style with tailwind

export default function Home() {
  return (
    <div className='bg-gray-700 text-white min-h-screen flex items-center justify-center'>
      <img src='/adamwathan.jpeg' alt='test' className='rounded-full w-10 h-10' />
    </div>
  )
}

This works flawlessly

img

!isColonel

2023-09-21T20:55:52.000Z

Can still style img tag but u loose the quality and priority props which help make image more better

Morgan

2023-09-21T20:56:14.000Z

Itâ€™s the actual img element you need to apply max-width on

@!isColonel Can still style img tag but u loose the quality and priority props which help make image more better

Red-billed TropicbirdOP

2023-09-21T20:56:38.000Z

So you're saying I should just use the Image with the required props and forget about using the tailwind w and h styles?:)

(but use everything else from Tailwind)

import Image from 'next/image'
import adamwathan from '../public/adamwathan.jpeg'

export default function Home() {
  return (
    <div className='bg-gray-700 text-white min-h-screen flex items-center justify-center'>
      <Image src={adamwathan} alt='test' width={40} height={40} className='rounded-full' />
    </div>
  )
}

This works

I guess thats just how people do it?

@Red-billed Tropicbird So you're saying I should just use the `Image` with the required props and forget about using the tailwind `w` and `h` styles?:)

!isColonel

2023-09-21T20:58:25.000Z

Use what u want. If image allows u to do what u want than use that but Image from next js requires those props. U can use Image and use the style={{}} and make it differently I think but like I said if priority and quality props dont matter just leavit

Red-billed TropicbirdOP

2023-09-21T20:58:28.000Z

seems weird to have styles both as its props and inside classname

@!isColonel Use what u want. If image allows u to do what u want than use that but Image from next js requires those props. U can use Image and use the style={{}} and make it differently I think but like I said if priority and quality props dont matter just leavit

Red-billed TropicbirdOP

2023-09-21T20:59:10.000Z

I prefer to learn the 'correct' nextjs way, which is the Image component

but I was just a bit confused as to why it had width and height as required props

seems like you answered

its probably due to making the quality and priority better

!isColonel

2023-09-21T20:59:42.000Z

Well its just the way nextjs is.

Morgan

2023-09-21T20:59:50.000Z

I thought width and height arenâ€™t required when importing the image?

Red-billed TropicbirdOP

2023-09-21T21:00:03.000Z

so I will use Image component with with and height required props, and tailwind CSS className for everything else in styles

@Morgan I thought width and height arenâ€™t required when importing the image?

Red-billed TropicbirdOP

2023-09-21T21:00:10.000Z

It isn't

but if one wants to specify something

thats the way to do it, it seems

Morgan

2023-09-21T21:00:32.000Z

So this doesnâ€™t make sense.

!isColonel

2023-09-21T21:00:40.000Z

You using ts or js?

@!isColonel You using ts or js?

Red-billed TropicbirdOP

2023-09-21T21:00:47.000Z

TS

!isColonel

2023-09-21T21:01:18.000Z

I think ive gotten away with just using width prop on js but ts is way strict.

@Morgan So this doesnâ€™t make sense.

Red-billed TropicbirdOP

2023-09-21T21:01:41.000Z

import Image from 'next/image'
import adamwathan from '../public/adamwathan.jpeg'

export default function Home() {
  return (
    <div className='bg-gray-700 text-white min-h-screen flex items-center justify-center'>
      <Image src={adamwathan} alt='test' className='rounded-full' />
    </div>
  )
}

I can do it without width and height when I import it

but I specified width={40} height={40} to make it smaller.

The default is huge (e.g. original image size)

Morgan

2023-09-21T21:02:14.000Z

Well that makes sense as the image is massive

Red-billed TropicbirdOP

2023-09-21T21:02:15.000Z

I wanted to resize it with tailwind css className, and I couldn't

w-10 and h-10 does nothing

Cairn Terrier

2023-09-21T21:02:39.000Z

Wrap it in a div and make it fill that maybe?

@Cairn Terrier Wrap it in a div and make it fill that maybe?

Red-billed TropicbirdOP

2023-09-21T21:03:24.000Z

seems like more work than just abandoning w and h tailwind css styles in className, and just use width={40} height={40} props as part of the Image component itself

Morgan

2023-09-21T21:04:02.000Z

Not worth the hassle. But if youâ€™re interested to know more, check what element the class is applied to.

!isColonel

2023-09-21T21:04:49.000Z

I did this for one of mine

 <Image
        priority
        quality={100}
        width={300}
        height={300}
        className="p-1 rounded-full ring-2 ring-sky-300 w-1/2 md:w-full md:h-full "
        style={{
          width: "205px",
          height: "205px",
          objectFit: "cover",
        }}
        src={Me}
        alt="Developer profile image"
      />