如何在 React 中使用带有动态类名的 Tailwind CSS？

将 Tailwind CSS 与动态类名称结合使用

使用 React 和 Tailwind CSS 时，可能很容易将动态值（例如上下文变量）作为类名称传递。然而，Tailwind 对类名有一个特定要求，即类名必须是完整的、不间断的字符串。因此，简单地传递一个插入到 className 中的变量将无法按预期工作。

Tailwind 的文档明确指出，“如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此将不生成相应的 CSS。”

解决方案：使用完整的类名

要有效地使用 Tailwind 与动态值，它使用完整的值集定义类名至关重要。例如，不要使用：

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

直接在 ThemeContext 中定义类：

const colors = {
  // …
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // …
};

然后在组件中使用它，如下所示：

<p className={`${colors.secondary} text-text-white`}></p>

替代方案：使用内联样式

如果定义完整的类名不可行，您也可以使用style 属性来应用动态样式：

<p className="text-text-white">

这种方法在处理动态值时提供了更大的灵活性，但需要使用内联样式。

以上是如何在 React 中使用带有动态类名的 Tailwind CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！