Tailwind 问题背景图片未加载

Question

我有顺风问题。我正在使用 React，我想用地图和 id 更改图像，所以我做了一个 .json 文件：

[
  {
    "id": "1",
    "title": "...",
    "description": "...",
    "link": "/work"
  },
  {
    "id": "2",
    "title": "...",
    "description": "...",
    "link": "/work"
  },

之后我将其映射到我的文件中，如下所示

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER${card.id}  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

如你所见，有 COVER${card.id} 并且在 tailwind.config.js 文件中我这样做了

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      proggy: ["Proggy", "monospace"],
    },
    extend: {},
    backgroundImage: {
      COVER1: "url('./assets/test1.jpg')",
      COVER2: "url('./assets/test2.jpg')",
      COVER3: "url('./assets/test3.jpg')",
      COVER4: "url('./assets/test4.jpg')",
      COVER5: "url('./assets/test5.jpg')",
      COVER6: "url('./assets/test6.jpg')",
    },
  },
  plugins: [],
};

这无法正常工作

我尝试这样做

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER1  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

在我撤消此操作并使其像这样之后，它正在工作

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER${card.id}  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

第一张图片现在可以使用了 我认为问题出在图像的加载上，但如果您需要更多文件，我不知道如何修复它。

Answer 1

TailwindCSS 通过扫描源代码并添加所有使用的类来生成样式表。但由于您实际上并未将它们写出来，因此它不会“看到”它们。 您可以在文档中阅读一些解决方案：https://tailwindcss.com/docs/content-configuration#dynamic-class-names

对于您的特定用例，我建议不要使用 Tailwind 作为封面，而是在 style 参数中设置背景

你可以尝试这样的事情：

<Link className="..." style={{
   backgroundImage: "url(...)"
}} />