使用 next

Question

我的任务是从数据库中获取十六进制代码，并且根据十六进制代码，颜色应该改变。

变量.js

const primaryColor = "#000000";
const secondaryColor = "#ff0000";
const notCheckedColor = "#9CA3AF";

export { primaryColor, secondaryColor, notCheckedColor };

这是代码示例

<section className={`bg-white py-12 mt-12  text-${secondaryColor}  sm:py-16 lg:py-20`}>

问题是颜色没有显示。

检查输出

也谢谢

我尝试静态添加它并且它有效，但是当我使用

bg-${secondaryColor}

代码时，它不起作用。

我希望十六进制代码返回元素的颜色。

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

你可以：

• 使用完整的类定义，例如：

  const primaryColor = "#000000";
  const secondaryColor = "text-[#ff0000]";
  const notCheckedColor = "#9CA3AF";
  
  export { primaryColor, secondaryColor, notCheckedColor };
  

  <section className={`… ${secondaryColor} …`}>
  

• 使用

  style

  属性：

  <section className="…" style={{ color: secondaryColor }}>