如何将 Tailwind CSS 与 Next.js 图片一起使用

Question

我正在尝试在 Next.js 项目中使用 Tailwind CSS，但我无法将我的 Tailwind 类与 Next.js 图像组件一起使用。

这是我的代码：

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

我想使用 Tailwind 类而不是 Next.js 图像的 height 和 width 属性。但我不能，因为它会给我一个错误。此外，unsized 属性抛出另一个错误，指出它已被弃用。有什么解决办法吗？

如果我不使用 height 和 width 属性，则会出现错误。

当我使用 layout='fill' 属性时，它只显示一张图片。如果我使用 unsized 属性，则会显示以下错误。

Answer 1

discussion and related example Next.js GitHub 项目。听起来那个例子实现了你想做的事情。 tl;博士：

<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>

图像将保留其原始宽高比并填充/覆盖（或您选择的任何 object-fit）外部尺寸 div，您可以使用 Tailwind 类进行设置.其他样式，如圆角，可以应用于 Image。

Answer 2

您可以使用 div 容器并对其应用 class。

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

Answer 3

原因是Image组件在DOM上的挂载方式。如果您检查 DOM，您将看到它作为图像组件：

如您所见，next.js 围绕 img 创建了一个包装器 div。所以要定位 img，你实际上应该定位包装器 div:

您还可以添加自定义 class 并调整 css

如何将 Tailwind CSS 与 Next.js 图片一起使用

How to use Tailwind CSS with Next.js Image

next.js

tailwind-css

nextjs-image