Búsqueda de sitios web

reactjs - Usando valores de posición dinámicos en Tailwind CSS

Quiero pasar valores de coordenadas a un componente como props usando clases de Tailwind CSS. Los valores cambian en cada movimiento del ratón, pero las clases no están funcionando.

Mi componente

    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;

y en las props que estoy pasando:

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

Estos valores no están funcionando usando las clases de utilidad de Tailwind CSS.

Respuesta #1

Tailwind no admite clases dinámicas, como las que estás intentando crear. El nombre completo de la clase de utilidad debe estar disponible en el momento de la compilación en tu código para que Tailwind lo encuentre y genere las clases CSS adecuadas.

Para algo tan dinámico como las coordenadas, recomendaría usar un atributo style junto con el atributo className que contiene tus clases de utilidad de Tailwind.

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

Luego puedes simplemente pasar los valores de posición numéricos a tu componente:

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

Información adicional sobre Tailwind y clases dinámicas: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Respuesta #2

De los documentos:

Tailwind no incluye ningún tipo de tiempo de ejecución del lado del cliente, por lo que los nombres de clase deben ser extraíbles de manera estática en tiempo de compilación y no pueden depender de ningún tipo de valores dinámicos arbitrarios que cambien en el cliente. Usa estilos en línea para estas situaciones, o combina Tailwind con una biblioteca CSS-in-JS como Emotion si tiene sentido para tu proyecto.

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

Incorrecto

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

Correcto

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

Artículos relacionados