在 Tailwind CSS 中使用动态位置值

Question

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

\n

我的组件

\n

    import classNames from "classnames";\n    interface TooltipProps {\n      coordinate: { left: string; top: string; isFavorite: boolean };\n    }\n    \n    const Tooltip: React.FC<TooltipProps> = ({ coordinate }: TooltipProps) => {\n      return (\n        <div\n          id="tooltip"\n          className={classNames(\n            `fixed ml-[auto] z-[999] p-[10px] text-sm font-medium text-white bg-gray-900 rounded-[6px] shadow-tooltip  dark:bg-gray-700`,\n            coordinate.left,\n            coordinate.top\n          )}\n        >\n          {coordinate.isFavorite ? "\xd8\xad\xd8\xb0\xd9\x81" : "\xd8\xa7\xd9\x81\xd8\xb2\xd9\x88\xd8\xaf\xd9\x86"} \xd8\xa8\xd9\x87 \xd8\xb9\xd9\x84\xd8\xa7\xd9\x82\xd9\x87\xe2\x80\x8c\xd9\x85\xd9\x86\xd8\xaf\xdb\x8c\n          <svg\n            className="absolute  bottom-[-10px] center "\n            width="16"\n            height="10"\n            viewBox="0 0 16 10"\n            fill="none"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="black" />\n          </svg>\n        </div>\n      );\n    };\n    \n    export default Tooltip;\n

\n

在我传递的道具中：

\n

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

\n

使用 Tailwind CSS 实用程序类时，这些值不起作用。

\n

Answer 1

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

对于像坐标这样动态的东西，我建议使用一个style属性以及className保存 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`}}
>

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

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

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

Answer 2

您可以${}在字符串中添加任何变量/动态值``。你可以像这样修改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}`}

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