NextFont变量无法通过CSS var()全局生效的技术咨询

核心问题：className拼接错误 #

你的layout.tsx中，将字体变量类名数组直接放入模板字符串时，数组会被转为逗号分隔的字符串（而非空格分隔），导致这些类名无法被正确识别，CSS变量也就无法注入到<body>元素中。

修复代码（layout.tsx） #

将原来的className拼接方式改为用join(' ')生成空格分隔的类名：

export default function RootLayout({
 children,
}: Readonly<{
  children: React.ReactNode;
}>) {return (
    <html lang="en">
      <body
        className={[
          syncopateRegular.variable,
          syncopateBold.variable,
          quickSandRegular.variable,
          quickSandSmBold.variable,
        ].join(' ')}
      >
        {children}
      </body>
    </html>
  );
}

后续验证与排查步骤 #

1. 检查CSS变量是否注入：打开浏览器开发者工具，查看<body>元素的style属性，确认是否存在--font-syncopate-reg等变量，值应为类似"Syncopate", sans-serif的字体族字符串。
2. 排查样式优先级冲突：查看.header元素的计算样式（Computed），如果font-family被其他样式覆盖，可提高选择器优先级，比如：

   @layer components {
     .card .card-header .header {
       font-family: var(--font-syncopate-reg);
       @apply text-center; /* 替换自定义的center类为Tailwind默认类 */
     }
   }
   

3. 验证自定义类center：Tailwind默认没有center工具类，若未自定义该类，@apply center会导致样式解析错误，建议替换为明确的类（如text-center、flex justify-center items-center）。

额外优化方案 #

若使用Tailwind v3+，可直接在Tailwind配置中扩展字体族，结合NextFont变量使用，无需手动写font-family: var(...)：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        syncopate: ['var(--font-syncopate-reg)'],
        quicksand: ['var(--font-quicksand-reg)'],
      },
    },
  },
}

之后在组件中直接使用font-syncopate类即可。

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