如何在 Next.js 图像中使用 Tailwind CSS [英] How to use Tailwind CSS with Next.js Image
问题描述
我正在尝试在 Next.js 项目中使用 Tailwind CSS,但我无法将 Tailwind 类与 Next.js Image 组件一起使用.
这是我的代码:
我想使用 Tailwind 类而不是 Next.js 图像的 height
和 width
属性.但我不能,因为它给我一个错误.此外, unsized
属性会引发另一个错误,指出它已被弃用.有什么解决办法吗?
如果我不使用 height
和 width
属性,则会出现错误.
当我使用 layout='fill'
属性时,它只显示一张图片.如果我使用 unsized
属性,则会显示以下错误.
有一个 讨论和相关示例 在 Next.js GitHub 项目中.听起来这个例子实现了你想要做的事情.tl;博士:
//相对"是必须的;根据您的喜好调整尺寸<图像src={img.img}alt=作者的图片";布局=填充"//必需的objectFit=封面"//更改以满足您的需求className =四舍五入";//只是一个例子/>
图像将保留其原始纵横比并填充/覆盖(或您选择的任何object-fit
)外部div
的大小,您可以使用顺风课.其他样式,如圆角,可以应用于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.
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.
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
.
这篇关于如何在 Next.js 图像中使用 Tailwind CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!