Tailwind CSS 类出现在 DOM 中，但未应用样式

Question

我在为某些标题动态分配文本颜色时遇到问题。我有一个 .map 函数，它运行并输出一些具有不同标题颜色的 divs。这是我的代码示例：

    {nftInfo.map((nft, index) => (
          <div
            className="flex flex-col space-y-3 rounded-lg border-2 border-opacity-25 bg-white p-5 hover:bg-slate-50 dark:border-slate-500 dark:bg-gray-700"
            key={index}
          >
            <div
              className={`flex justify-center space-x-4 font-bold text-${nft.color}-600 dark:text-${nft.color}-400`}
            >
              <div className={`text-lg  `}>
                {nft.title} {nft.color}  <--- This outputs the correct color
              </div>
              {nft.icon}
            </div>
    </div>

JSON的例子：

    {
          title: 'Dummy text 2',
          description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime minima odit aspernatur aliquam deleniti in corporis omnis cupiditate optio, voluptatum quasi reiciendis dolor, nostrum nihil quaerat est, doloremque mollitia possimus.',
          bottomText: 'Lorem ipsum dolor sit amet consectetur adipisicing',
          buttonText: 'Generate contract',
          icon: <CodeIcon className="mt-1 h-6 w-6" />,
          color: 'pink'
    }

在这里你可以看到我正在根据我在上面 JSON 中设置的颜色分配文本颜色。

text-${nft.color}-600 dark:text-${nft.color}-400

我还可以在开发者工具 DOM 视图中看到正确分配的字符串，但是当我在开发者工具中检查 CSS 时，样式未应用...

此外，如果我手动将 class 添加到 div，标题会变色...

Answer 1

Tailwind 生成的 CSS 文件将只包含它在扫描您的代码时识别的类，这意味着动态生成的类（例如 text-${nft.color}-600）将不包括在内。

为确保将您的颜色添加到 CSS，您可以在 tailwind.config.js 中添加安全列表，其中包含您需要的所有颜色实用程序类（请参阅 https://tailwindcss.com/docs/content-configuration#safelisting-classes).

module.exports = {
  ...

  safelist: [
    'text-pink-600',
    'dark:text-pink-400',
  ]
}

另一种解决方案是在组件的对象中添加实用程序类，以便在 Tailwind 解析您的代码时将它们拾取并添加到样式表中。然后，您可以使用 nft.color 变量查找颜色。例如：

const colors = {
  "pink": { 
    "light": "text-pink-600",
    "dark": "dark:text-pink-400",
  },
  ...
}

<div className={`${colors[nft.color].light} ${colors[nft.color].dark}`} />

Tailwind CSS 类出现在 DOM 中，但未应用样式

Tailwind CSS classes show up in the DOM, but the styles are not being applied

css

reactjs

tailwind-css

Tailwind CSS 类 出现在 DOM 中，但未应用样式

Tailwind CSS classes show up in the DOM, but the styles are not being applied

css

reactjs

tailwind-css

Tailwind CSS 类出现在 DOM 中，但未应用样式