Dynamic height for an image using Tailwind and Next.js

Question

I'm using Tailwind with Next.js, and I'm trying to figure out how to dynamically set the height for the "figure" element. Here's how I have it setup:

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

Here's what narrowImageClass would be. It's essentially computing the height of the image container.

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

When this renders into HTML the classes look correct, but the height of figure ends up being set to 0 and so nothing renders on my screen. Any idea why this might be happening and how to fix it?

Thanks!

score 2 · Answer 1 · answered Sep 09 '22 at 18:59

This will be because you are using dynamic classnames. Tailwind will only find classes that exist as complete unbroken strings in your source files.

As explained here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

The classnames need to be in the code somewhere, or you could look at adding them to your config as a safelist or regex.

Details here: https://tailwindcss.com/docs/content-configuration#safelisting-classes

Dynamic height for an image using Tailwind and Next.js

1 Answers1