我正在使用TailwindCSS开发一个React JS应用程序，所有Tailwind属性都可以工作，但是字体在运行应用程序时没有更新。如果我使用样式属性而不是className来放置字体，字体就会正确显示。
这是我的主页：

<div className="flex flex-row mr-8">
   <p className="text-white font-bold font-body">
    SALE ESPORTS
   </p>
</div>

这是我的tailwind.config.js文件

module.exports = {
  content: ["./src/**/*.{html, js, ts, jsx, tsx}"],
  theme: {
    fontFamily: {
      body: ["Chakra Petch"],
      gaming: ["Press Start 2P"],
      icons: ["Material Icons"],
    },
    extend: {
      colors: {
        primary: {
          accent: "#30ACFF",
          main: "#4448BB",
          dark: "#000A3B",
        },
        secondary: {
          accent: "#E84AE6",
          main: "#C01EE1",
          dark: "#70288F",
        },
        backColor: "#1A1B1F",
      },
    },
  },
  plugins: [],
};

这是我的index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

在我的index.html页面中，我从谷歌字体中获得了链接：

<link
      href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap"
      rel="stylesheet"
    />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="/dist/output.css" rel="stylesheet" />

下图显示了项目结构：