Using dynamic position values in Tailwind CSS

Question

I want pass coordinate values to a component as props Using Tailwind CSS classes. The values change every mouse hover, but the classes are not working.

My component

    import classNames from "classnames";
    interface TooltipProps {
      coordinate: { left: string; top: string; isFavorite: boolean };
    }
    
    const Tooltip: React.FC<TooltipProps> = ({ coordinate }: TooltipProps) => {
      return (
        <div
          id="tooltip"
          className={classNames(
            `fixed ml-[auto] z-[999] p-[10px] text-sm font-medium text-white bg-gray-900 rounded-[6px] shadow-tooltip  dark:bg-gray-700`,
            coordinate.left,
            coordinate.top
          )}
        >
          {coordinate.isFavorite ? "حذف" : "افزودن"} به علاقه‌مندی
          <svg
            className="absolute  bottom-[-10px] center "
            width="16"
            height="10"
            viewBox="0 0 16 10"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="black" />
          </svg>
        </div>
      );
    };
    
    export default Tooltip;

and in the props I'm passing:

  setCoordinate({
    top: `top-[${Math.round(top)}px]`,
    left: `left-[${Math.round(left)}px]`,
  });

These values are not working using the Tailwind CSS utility classes.

Answer 1

Tailwind does not support dynamic classes, such as the ones you are trying to create. The full utility class name must be available at build time in your code for Tailwind to find it and generate the proper CSS classes.

For something as dynamic as coordinates, I would recommend using a style attribute along with the className attribute holding your Tailwind utility classes.

<div 
  id="tooltip"
  className="fixed ml-auto z-[999] p-[10px] text-sm font-medium text-white bg-gray-900 rounded-[6px] shadow-tooltip dark:bg-gray-700"
  style={{top: `${coordinate.top}px`, left: `${coordinate.left}px`}}
>

Then you can just pass the numeric position values to your component:

setCoordinate({
  top: Math.round(top),
  left: Math.round(left)
});

Additional information regarding Tailwind and dynamic classes: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Answer 2

From the docs:

Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client. Use inline styles for these situations, or combine Tailwind with a CSS-in-JS library like Emotion if it makes sense for your project.

https://v2.tailwindcss.com/docs/just-in-time-mode

Wrong

<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

Correct

<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>