如何将上下文变量与 Tailwind CSS 类名称一起使用？

使用 Tailwind CSS 的动态类名称

在 React 中使用上下文变量时，通常希望将这些值作为类名称传递给 Tailwind CSS。但是，这种方法可能会遇到限制。

Tailwind CSS 命名约定

根据 Tailwind CSS 文档，它仅将完整的不间断字符串解释为有效的类名。通过插值或串联构造的动态类名将无法被识别。

解决方案：

• 使用完整类名：定义完整类ThemeContext 中的名称，确保它们作为单个存在string.

• 示例：

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

• 使用内联样式属性：

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

  通过遵循这些解决方案，您可以有效地将上下文变量合并到您的 Tailwind CSS 类名称。

以上是如何将上下文变量与 Tailwind CSS 类名称一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！