在 Tailwind CSS 中使用动态位置值

Question

我想使用 Tailwind CSS 类将坐标值作为 props 传递给组件。每次鼠标悬停时，这些值都会发生变化，但这些类不起作用。

我的组件

    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;

在我传递的道具中：

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

这些值无法使用 Tailwind CSS 实用程序类。

Answer 1

Tailwind 不支持动态类，例如您尝试创建的动态类。完整的实用程序类名称必须在构建时在代码中可用，以便 Tailwind 找到它并生成正确的 CSS 类。

对于像坐标这样动态的东西，我建议使用

style

属性以及保存 Tailwind 实用程序类的

className

属性。

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

然后您可以将数字位置值传递给您的组件：

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

有关 Tailwind 和动态类的其他信息：https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Answer 2

来自文档：

Tailwind 不包含任何类型的客户端运行时，因此类名需要在构建时静态提取，并且不能依赖于客户端上更改的任何类型的任意动态值。在这些情况下使用内联样式，或者如果对您的项目有意义的话，请将 Tailwind 与 CSS-in-JS 库（如 Emotion）结合起来。

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

错了

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

正确

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

Answer 3

正如 Toni 提到的，不能依赖于客户端发生变化的任何类型的任意动态值。我建议使用内联样式来更改

top

和

left

值。

应用这些代码更改。

    interface TooltipProps {
      coordinate: { left: number; top: number; isFavorite: boolean };
    }
    
    const Tooltip: React.FC<TooltipProps> = ({ coordinate }: TooltipProps) => {
      return (
        <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`}}
          }
        >
          {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;

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

Answer 4

Tailwind 支持使用数据属性作为修饰符；能够使用数据属性中的值来打开或关闭顺风类。

示例：

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

文档：https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes

Answer 5

将计算出的样式值添加到

style

属性就是解决方案。

 <div 
    className={`bg-white h-4 w-0.5 ...`}
    style={{ left: `${normalizedPercentage}rem` }}
 />

Answer 6

您可以

${}

在

``

字符串中添加任何变量/动态值。你可以这样修改className

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 ${coordinate.left} ${coordinate.right}`}

有关更多信息，您可以参考此用例和我的答案：这里