Tailwind v4自定义字体primaryFont不生效问题求助

API 探路者

2026-6-13

Tailwind v4自定义字体不生效的解决方法

你的配置存在两处关键错误，导致字体无法生效：

1. @theme配置格式错误

Tailwind v4中自定义字体必须在fontFamily命名空间下声明，而非直接定义变量。修正后的global.css如下：

@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import "tailwindcss";

@theme {
  fontFamily: {
    primary: "Arima", system-ui;
  }
}

2. 字体类名使用错误

自定义字体的类名规则是font-加上你在fontFamily下定义的名称（小写，名称中无特殊字符），而非直接使用变量名。修正后的page.js代码：

import Link from "next/link";
import { navLinks } from "./data";
// /pages/single

export default function Home() {
  return (
    <div className="font-primary">
      {navLinks.map((link, idx) => (
        <Link href={`./pages/single/${link.name}`} key={idx} className="p-4">
          {link.imageUrl}
        </Link>
      ))}
    </div>
  );
}