Next.js15+TailwindCSSv4禁用Turbopack后字体失效问题咨询

针对你提出的三个问题，逐一解答如下：

1. 禁用Turbopack后globals.css中@import url()字体失效的原因 #

核心原因有两点：

• SWC的树摇优化：禁用Turbopack后，Next.js默认使用SWC处理CSS。SWC会自动移除它判定为「未被实际使用」的资源。如果你的代码里没有通过Tailwind类（比如font-poppins）或自定义样式引用这些字体，SWC会直接剔除@import的字体请求，导致网络中看不到字体加载记录。
• Tailwind v4的编译顺序：如果@import语句写在了@tailwind base/components/utilities指令之后，Tailwind v4的编译流程会优先处理自身的核心指令，忽略后续的外部资源导入，导致字体无法被正确注入到最终样式中。

至于启用Turbopack时需要重启才生效，是因为Turbopack的缓存机制对外部资源的监听不够灵敏，无法自动触发字体加载状态的刷新，必须重启项目才能重新解析@import。

2. 能否通过globals.css正确加载外部Google字体？ #

完全可以，只要遵循以下配置步骤：

1. 将@import放在全局CSS的最顶部：确保它在所有Tailwind指令之前，避免被Tailwind的编译流程忽略：

/* globals.css 最顶部位置 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Poppins:wght@300;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 在Tailwind配置中声明字体族：让Tailwind识别这些字体，同时告诉SWC这些资源是被使用的，避免被树摇：

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        montserrat: ['Montserrat', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

export default config;

3. 在代码中实际使用字体类：比如在组件或全局样式中添加font-poppins、font-montserrat类，确保SWC不会把字体@import判定为无用资源。

3. 此行为是否符合预期？有无更优方案？ #

这种行为完全符合Next.js 15和Tailwind CSS v4的设计逻辑——两者都在强化资源优化和编译效率，未被使用的资源会被自动剔除，以减少最终打包体积和网络请求。

官方推荐的next/font/google是更优方案，优势包括：

• 自动优化加载：自动添加预加载标签，避免FOIT（无样式文本闪烁），提升页面加载体验。
• 支持自托管：可将Google字体下载到本地，避免依赖外部CDN，提升加载稳定性。
• 完善的类型支持：TypeScript项目中能获得完整的类型提示，减少配置错误。
• 无缝集成Tailwind：通过CSS变量与Tailwind主题系统配合，无需担心样式冲突或失效问题。

具体配置示例：

// layout.tsx
import { Poppins, Montserrat } from 'next/font/google';

// 配置字体并生成CSS变量
const poppins = Poppins({
  subsets: ['latin'],
  weight: ['300', '500'],
  variable: '--font-poppins',
});

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-montserrat',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN" className={`${poppins.variable} ${montserrat.variable}`}>
      <body>{children}</body>
    </html>
  );
}

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      fontFamily: {
        poppins: ['var(--font-poppins)', 'sans-serif'],
        montserrat: ['var(--font-montserrat)', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

export default config;

这样配置后，字体加载会被Next.js完全优化，同时能和Tailwind的主题系统无缝配合，也不会出现热更新或失效的问题。

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