在Next.js 13中为Tailwind添加Google Fonts时遭遇ReferenceError

我想设置一款自定义字体，这样写代码时不用逐个定义字体。我按照NextJS官方文档操作后，出现了如下错误：

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[1].oneOf[13].use[2]!./src/styles/globals.css
ReferenceError: fontFamily is not defined

相关代码 #

_app.js #

import { Roboto } from "next/font/google";

const roboto = Roboto({
  weight: ["300", "400", "500", "700"],
  style: ["normal", "italic"],
  subsets: ["latin"],
});

export default function App({ Component, pageProps }) {
  return (
    <main className={`${roboto.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  );
}

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-roboto)", ...fontFamily.sans],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

globals.css #

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

解决方案 #

报错的核心原因是**tailwind.config.js里引用的fontFamily.sans未定义**——你试图扩展Tailwind默认的sans字体，但没有导入默认主题配置。有两种修复方式：

方式1：导入Tailwind默认主题 #

修改tailwind.config.js，先引入defaultTheme，再用它来获取默认的sans字体列表：

/** @type {import('tailwindcss').Config} */
const { defaultTheme } = require('tailwindcss');

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-roboto)", ...defaultTheme.fontFamily.sans],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

方式2：手动指定 fallback 字体 #

如果不需要Tailwind默认的sans字体，可以直接替换成通用的系统无衬线字体：

fontFamily: {
  sans: ["var(--font-roboto)", "sans-serif"],
},

另外确认_app.js里的roboto.variable类名已正确添加到根元素，Next.js会自动生成--font-roboto这个CSS变量，这部分你的代码是没问题的。

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