Undefined font CSS variables in create-next-app generated Tailwind v4 template

[wxh06]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/4grdtp

To Reproduce

I followed these steps to create the reproduction:

1. pnpm create next-app@canary --tailwind --yes
2. Simply replace the component in app/page.tsx (or pages/index.tsx) with return <span className="font-mono">Hello, world!</span>

To reproduce the issue based on the reproduction:

1. pnpm run dev (or pnpm run build then pnpm run start)
2. Navigate to http://localhost:3000/
3. (Open browser developer tools)

Current vs. Expected behavior

Current behavior	Expected behavior
text displayed in default font, got all font-related variables undefined	text shown in monospaced font (as in screenshot below from Next.js 15.1 with Tailwind CSS v3)

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.2.0-canary.61 // Latest available version is detected (15.2.0-canary.61).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, CSS, Font (next/font)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

Introduced in #75407

Removing @theme section (below) from globals.css can address this issue but then we can't benefit from Vercel's Geist Font.

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

[stefanprobst]

i think this requires @theme inline {}, see https://tailwindcss.com/docs/theme#referencing-other-variables

[wxh06]

@eteen12
You need to add this in globals CSS since you called the class name text-mono

.text-mono{ font-family: var(--font-geist-mono); }

font-mono is a Tailwind CSS class name and the font-family property shoud be added automatically by PostCSS.

[eteen12]

@wxh06 Your right. But you need to add @theme inline { } like @stefanprobst suggested

[wxh06]

@eteen12
Your right. But you need to add @theme inline { } like @stefanprobst suggested

It's not my bad. Instead, this is what Next.js should modify inside its create-next-app templates.
That's why I opend this issue.