How to use Tailwind CSS with Next.js Image

Question

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.

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.

Share with us the error output.

Juan Marco
– Juan Marco

2020-11-15 16:33:57 +00:00
Commented Nov 15, 2020 at 16:33 — Juan Marco
– Juan Marco, Commented Nov 15, 2020 at 16:33
@JuanMarco updated...

Pranta
– Pranta

2020-11-16 05:11:12 +00:00
Commented Nov 16, 2020 at 5:11 — Pranta
– Pranta, Commented Nov 16, 2020 at 5:11

tjanson · Accepted Answer · 2020-12-03 21:46:07Z

111

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.

answered Dec 3, 2020 at 21:46

tjanson

1,6361 gold badge13 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thiras Over a year ago

Is there a way to determine the height by the content in it instead of the height of the image?

user3151675 Over a year ago

@thiras I ended up using aspect-[] for that.

nick Over a year ago

Nextjs switched up their api in Next13, objectFit now has to be provided as a style nextjs.org/docs/app/api-reference/components/…

Loïc V · Accepted Answer · 2022-06-29 01:20:09Z

4

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

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

answered Jun 29, 2022 at 1:20

Loïc V

6358 silver badges11 bronze badges

Comments

Lonare · Accepted Answer · 2023-06-14 08:39:06Z

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>

ttt · Accepted Answer · 2024-02-25 01:09:24Z

0

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

answered Feb 25, 2024 at 1:09

ttt

6,8695 gold badges57 silver badges72 bronze badges

Comments

Salil Rajkarnikar · Accepted Answer · 2021-07-09 02:46:57Z

-1

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>

edited Jul 9, 2021 at 2:46

user633440

answered Jul 8, 2021 at 9:24

Salil Rajkarnikar

7621 gold badge10 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to use Tailwind CSS with Next.js Image

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related