Next.js项目中Tailwind CSS的font-inter类不存在错误求助

问题原因 #

你在自定义CSS类中使用了font-inter，但Tailwind无法识别这个自定义类——根据错误提示，自定义工具类必须放在@layer指令内，才能被Tailwind的解析系统正确处理。

解决方案 #

步骤1：引入Inter字体 #

先确保项目中已引入Inter字体，推荐用Next.js官方的next/font工具自动导入：

// 根布局文件（如app/layout.js或pages/_app.js）
import { Inter } from 'next/font/google';

// 导入Inter字体并生成CSS变量
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

如果不想用next/font，也可以通过CDN在HTML头部引入：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

步骤2：在@layer utilities中定义font-inter类 #

在你的global.css文件中添加以下代码，把font-inter注册为Tailwind工具类：

@layer utilities {
  .font-inter {
    /* 用next/font生成的CSS变量 */
    font-family: var(--font-inter), sans-serif;
    /* 如果用CDN引入，替换为：font-family: 'Inter', sans-serif; */
  }
}

步骤3：验证Tailwind配置（可选） #

确保tailwind.config.js的content字段包含所有使用该类的文件路径，避免Tailwind把这个类当成未使用代码清除：

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 可选：在主题中扩展 fontFamily，也能直接用`font-inter`
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
      },
    },
  },
}

完成上述步骤后，重启Next.js开发服务器，font-inter的错误即可解决。

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