Next.js 13 + Tailwind localFont无法渲染到font-sans类求助

我在使用Next.js和TailwindCSS开发项目时，尝试通过变量配置本地字体，但设置后字体没有任何变化。

layout.js 代码 #

import localFont from "next/font/local";

// Font files can be colocated inside of `app`
const customFont = localFont({
  src: [
    {
      path: "./components/typography/localFont/exConSemiBold.ttf",
      weight: "normal",
      style: "normal",
    },
  ],
  variable: "--custom",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${customFont.variable} font-sans`}>
      <body>{children}</body>
    </html>
  );
}

tailwind.config.js 代码 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--custom)"],
      },
      colors: {
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

测试组件（app/Car/page.js）代码 #

export default function Car() {
  return <p className="font-sans">This is a car</p>;
}

问题细节 #

使用font-sans类后字体没有任何变化，但生成的CSS中已加载该字体，通过浏览器检查器手动将font-family设置为变量生成的字体名称时，字体可正常显示。

同时存在以下异常现象：

• 给文档设置customFont.className而非customFont.variable时，字体可正常加载
• 尝试使用font-custom等其他命名替代font-sans，仍无效果
• 更换不同字体文件后问题依旧

内容的提问来源于stack exchange，提问作者user2868900