在 Tailwind 类名中使用 React 变量

Question

我最近刚刚为一个项目选择了 React 和 Tailwind，但我仍然是一个初学者。我想让一个元素有一个背景图像作为自定义类变量，如下所示：

<div className="bg-[url(`https://example.com/${variable}.png`)]"></div>

但随着 Tailwind 清理班级，这有可能吗？我希望我没有错过任何东西，但现在对我来说似乎不可能

Answer 1

Tailwind 有一个名为“安全列表”的功能，它可以为您提供所需的功能 \xe2\x80\x93请参阅此处的文档。

\n

那是说：

\n

1 -在同一个元素 \xe2\x80\x93 上同时使用className和props没有什么问题，你可以有例如style<div className="w-full" style={`background: url(https://example.com/${variable}.png`}>

\n

2 \xe2\x80\x93 根据您使用的 React 风格，您可能最好使用Next.js\'s Image之类的组件来优化图像，而不是通过 CSS 设置背景。下面是我的做法：

\n

import Image from "next/image";\n\nexport default function MyBackground(props) {\n  return (\n    <div\n      className="z-0 absolute inset-0 w-full h-full flex justify-center items-center"\n    >\n      <Image\n        placeholder="blur"\n        alt={props.alt}\n        src={props.src}\n        className="h-full w-full object-cover"\n      />\n    </div>\n  );\n}\n\n\n

\n