Skip to content

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

Open
@wxh06

Description

@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)
Screenshot 2025-02-15 at 09.08.53.png Screenshot 2025-02-15 at 09.07.40.png

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);
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    create-next-appRelated to our CLI tool for quickly starting a new Next.js application.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions