bug: Default font doesn't work with Pages Router + Tailwind

[raikasdev]

Provide environment information

System: OS: Linux 6.6 Pop!_OS 22.04 LTS CPU: (16) x64 AMD Ryzen Threadripper 1900X 8-Core Processor Memory: 16.88 GB / 31.19 GB Container: Yes Shell: 5.8.1 - /usr/bin/zsh Binaries: Node: 18.19.0 - /usr/local/bin/node npm: 10.2.3 - /usr/local/bin/npm pnpm: 7.33.4 - ~/.local/share/pnpm/pnpm bun: 1.0.22 - ~/.bun/bin/bun I'm using npm & node. Version: 7.26.0

Describe the bug

The tailwindcss config file sets "var(--font-sans)" as the first font used. But --font-sans is only available in App Router template (Inter, provided by next/font) here

This causes browsers (at least Chrome and Firefox on Linux) to not try other fonts and just skip the font-family as invalid due to having an empty/invalid value. Not even moving it to second helps as it makes the whole property value invalid.

Reproduction repo

https://github.com/raikasdev/t3-app-fonts-problem

To reproduce

1. Create a new app with Tailwind and decline App Router.
2. Do the normal shenanigans, push db etc
3. Start npm run dev and open in browser

Additional information

I was able to fix this by copying the Inter code from App Router to the index.tsx. Probably using a layout would be a better solution, but yeah.