Next.js 15新项目中Tailwind v4导入Google字体失效问题求助

问题根源 #

Tailwind 4的@import "tailwindcss"会优先处理框架核心样式，导致之前的Google字体导入被忽略，浏览器不会发起对应的网络请求。

修复步骤 #

调整导入顺序，将Google字体的@import放在Tailwind核心导入之后，同时保持主题配置正确：

@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap");

@theme {
  --font-hello: Rubik Bubbles, sans-serif;
}

额外排查点 #

• 必须在页面元素上实际使用font-hello类（比如<p class="font-hello">测试内容</p>），Tailwind的按需编译特性会剔除未使用的字体相关资源请求
• 检查浏览器网络面板，确认字体请求状态，若出现404需核对Google字体URL的正确性
• 确认项目中没有其他Tailwind配置覆盖了自定义的--font-hello主题变量

内容的提问来源于stack exchange，提问作者Screensavers