Next.js 11/12与Tailwind中谷歌字体导入顺序问题咨询

问题现象 #

将Next.js从11.1.4升级到12.3.4后，Tailwind CSS文件中字体@import语句的顺序直接影响字体加载效果：

• 若@import放在@tailwind指令之后，字体被忽略、对应的CSS未加载（该顺序仅在Next.js 11中有效）
• 若@import放在@tailwind指令之前，字体可正常加载（该顺序在Next.js 11和12中均有效）

原因分析 #

Next.js 12对CSS处理链进行了升级，尤其是与Tailwind集成的PostCSS和webpack逻辑：

1. Tailwind的@tailwind指令会生成完整的基础样式、组件类和工具类代码块。在Next.js 12中，处理器会将这些生成代码视为完整的CSS上下文，后续的@import语句无法被正确解析或注入到样式流中。
2. Next.js 11的CSS处理逻辑对@import位置限制更宽松，允许在Tailwind指令后解析外部资源，但这不符合Tailwind官方的最佳实践。

从Tailwind设计逻辑来看，外部字体需要先加载，才能让Tailwind的基础样式（如font-family相关类）正确引用这些字体定义，因此先导入外部资源是合理的顺序要求。

解决方案 #

严格遵循先导入外部资源，再加载Tailwind指令的顺序，示例代码如下：

@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

这种顺序不仅适配Next.js 12的CSS处理规则，也是Tailwind官方推荐的外部资源导入方式，能避免样式优先级冲突和资源加载顺序问题。

内容的提问来源于stack exchange，提问作者Michał Zdolski