CODEWITHSUNDEEP
next.jstailwind-cssnextjs-image
Pranta
Pranta

Reputation: 3695

How to use Tailwind CSS with Next.js Image

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 and width 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 and width property. enter image description here

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

enter image description here

Upvotes: 71

Views: 63926

Answers (5)

ttt
ttt

Reputation: 6809

Use the fill property.

Next.js 14.1.0 example:

<Link
    href="/"
    className="relative h-4 w-36 sm:h-5 sm:w-48"
>
    <Image
        src="/logo.svg"
        alt="logo"
        priority={true}
        fill={true}
    />
</Link>

From the official documentation:

fill={true}

A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown.

The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

By default, the img element will automatically be assigned the position: "absolute" style.

Official documentation: https://nextjs.org/docs/app/api-reference/components/image#props

Upvotes: 0

Lonare
Lonare

Reputation: 4653

When I read through the Next.js 13 documentation I found out that it is very important to understand that when you are using fill with nextjs Image tag, the parent container should be relative.

fill

fill={true} // {true} | {false}

A boolean that causes the image to fill the parent element instead of setting width and height.

The parent element must assign position: "relative", position: "fixed", or position: "absolute" style.

By default, the img element will automatically be assigned the position: "absolute" style.

The default image fit behavior will stretch the image to fit the container. You may prefer to set object-fit: "contain" for an image which is letterboxed to fit the container and preserve aspect ratio.

Alternatively, object-fit: "cover" will cause the image to fill the entire container and be cropped to preserve aspect ratio. For this to look correct, the overflow: "hidden" style should be assigned to the parent element.

For more information, see also:

position
object-fit
object-position

So I did it like this:

<div className="relative w-full h-full overflow-hidden">
  <Image   
                                                        
      className="rounded-sm"  
      object-fit="cover" 
      fill={true}  
      alt={group?.name ? group.name : "no details" }
      src="https://www.oddcircles.com/images/group-image.png" 
  />
</div>

Upvotes: 3

Lo&#239;c V
Lo&#239;c V

Reputation: 635

It's been solved, no more need for hacky solutions. Just style them using tailwind directly!

https://nextjs.org/blog/next-12-2

Upvotes: 4

Salil Rajkarnikar
Salil Rajkarnikar

Reputation: 754

You can use a div container and apply a class to it.

<div className="bg-mint text-mint fill-current">
    <Image
        src={img.img}
        alt="Picture of the author"
        width="200"
        height="200">
    </Image>
</div>

Upvotes: -1

tjanson
tjanson

Reputation: 1616

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.

Upvotes: 109

Related Questions