使用 Tailwind 和 Next.js 的图像的动态高度

Question

我正在使用带有 Next.js 的 Tailwind，并且我正在尝试弄清楚如何动态设置“figure”元素的高度。 这是我的设置方式：

<figure className={format === "wide" ? wideImageClass : narrowImageClass}>
   <Image
     src={url}
     alt={alt}
     width={width}
     height={height}
     layout="fill"
     objectFit="contain"
   />
   <figcaption className="font-display text-sm text-gray-700">
     {caption}
   </figcaption>
 </figure>;
                 

这是narrowImageClass的内容。 它本质上是计算图像容器的高度。

  const narrowImageClass = `relative my-6 h-[${Math.round(
              (articleWidth * height) / width
            )}px]`;

当它呈现到 HTML 时，这些类看起来是正确的，但是figure的高度最终被设置为0 ，所以我的屏幕上什么也没有呈现。 知道为什么会发生这种情况以及如何解决吗？

谢谢！

Answer 1

这将是因为您使用的是动态类名。 Tailwind 只会在您的源文件中查找作为完整的完整字符串存在的类。

如此处所述： https://tailwindcss.com/docs/content-configuration#dynamic-class-names

类名需要在代码中的某个地方，或者您可以将它们作为安全列表或正则表达式添加到您的配置中。

详细信息： https://tailwindcss.com/docs/content-configuration#safelisting-classes