Hello 👋

I've bootstrapped a next app using npx create-next-app <app_name> and answering yes to all prompts.

When adding a simple tag into the app, the applied classes do not appear to work.

<h1 className="text-red-500">
  hello world
</h1>

After a bit of debugging - I can see that the globals.css file isn't refreshing, and for reasons people smarter than me will understand, the issue is next/font.

Removing these lines, along with the classNames applied to the body, from the bootstrapped layout resolves the issue.

const geistSans = Geist({
    variable: "--font-geist-sans",
    subsets: ["latin"],
});

const geistMono = Geist_Mono({
    variable: "--font-geist-mono",
    subsets: ["latin"],
});

Video attached for reference.

I can continue without the fonts for now, but I would like to use them at some point. Is this a me problem, or an issue with the bootstrap?

Thanks 🙏