#TailwindCSS with Image

3 messages · Page 1 of 1 (latest)

silent reef
#

Hi there you beautiful people!

So, I'm using TailwindCSS 😄 And I'm trying to use it with the next/image, like so:

<Image className="h-8 w-auto sm:h-10"

Now, the issue is: Error: Image with src "https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" must use "width" and "height" properties or "layout='fill'" property.

However, when reading this: https://nextjs.org/blog/next-12-2#improvements-to-nextimage

I'm a bit confused on what I'm meant to do.

Next.js 12.2

Next.js 12.2 introduces stable Middleware and On-Demand ISR, experimental Edge SSR and API Routes, and more!

tidal coral
#

You're gonna have to wrap the next/image in a div and style the div instead.

novel compass
#

It's right there in the error: "must use "width" and "height" properties or "layout='fill'" property" - You can try this:

<div className="h-8 w-auto sm:h-10">
  <Image src="foo" layout="fill" />
</div>