使用tailwind / react中的变量

Question

我有问题，顺风不解释类中的变量。

// header
const HeaderComponent = (props) => {
const { color } = props;
return (
<div className={`border-2 p-3 border-${color} hover:bg-${color}`}>
<div>{color}</div>
</div>
);
};

{color}在div中起作用，但在className行中不起作用。

道具如下:

const SectionComponent = () => {
return (
<div className="container max-w-screen-lg pt-3 pb-3 mx-auto">
<HeaderComponent color="blue-800" />
</div>
);
};

Answer 1

由于Tailwind扫描您的代码以查找完整的类名，因此您无法动态构建这些名称。一个可能的解决方案是使用style属性:

<div style={{borderColor: color}} .../>

另一种方法是将整个类名作为props传递:

<HeaderComponent borderColor="border-blue-800" backgroundColor="hover:bg-blue-800" />
...
<div className={`border-2 p-3 ${borderColor} ${backgroundColor}`}>