Next.js项目引入Tailwind全局样式报错：font-inter类不存在

1. 安装Inter字体 #

在项目根目录执行以下命令安装Inter字体包：

npm install @fontsource/inter

2. 在全局样式文件中引入字体 #

打开app/globals.css（若使用Pages路由则是pages/_app.css），在文件最顶部添加：

@import '@fontsource/inter';

3. 在Tailwind配置中注册字体 #

找到项目根目录的tailwind.config.js，修改theme.extend.fontFamily配置项，添加Inter字体的定义：

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

4. 用@layer指令显式定义字体类（可选） #

如果上述步骤仍未解决问题，可在globals.css中通过@layer指令直接声明font-inter类：

@layer utilities {
  .font-inter {
    font-family: 'Inter', sans-serif;
  }
}

问题原因说明 #

教程仓库已经预先完成了Inter字体的安装、引入和Tailwind配置，你仅复制了globals.css文件，缺失了这些配套配置，导致Tailwind无法识别font-inter类。

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