Next.js（非App Router+src目录）中Tailwind CSS无法加载自定义Google字体Offside的问题求助

问题分析 #

你遇到的核心矛盾是：用@import "tailwindcss"这种导入方式时现有样式正常，但自定义字体不生效；换成Tailwind官方推荐的三个核心指令又会直接崩掉现有样式——这本质是你当前的globals.css混合了Tailwind自定义主题语法和非规范的样式书写方式，导致样式优先级、加载顺序出了问题。

具体解决方案 #

不用推翻现有配置，只需要做几个小调整，就能在保留原有样式的前提下让字体正常生效：

1. 调整 globals.css 的结构与层级

把自定义的根变量、body样式都放到@layer base包裹中，同时保持Google字体导入在最顶部，这样既不破坏现有样式，又能让Tailwind正确识别字体优先级：

修改后的globals.css：

/* 1. Google字体导入必须在最顶部，确保先加载 */
@import url("https://fonts.googleapis.com/css2?family=Offside&display=swap");

/* 2. 保留原有的Tailwind导入 */
@import "tailwindcss";

/* 3. 把所有基础样式放到@layer base里，让Tailwind正确处理优先级 */
@layer base {
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }

  @theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --font-sans: var(--font-geist-sans);
    --font-mono: var(--font-geist-mono);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: #0a0a0a;
      --foreground: #ededed;
    }
  }

  body {
    background: var(--background);
    color: var(--foreground);
  }
}

/* 4. 你的工具类已经用@layer utilities包裹了，不用修改 */
@layer utilities {
  @keyframes slideDownFade {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-slide-down-fade {
    animation: slideDownFade 0.5s ease-out;
  }
}

2. 确认 tailwind.config.js 的配置正确性

你的配置其实已经没问题了，不过可以再核对两个细节：

• 字体名Offside要和Google Fonts上的字体名完全大小写一致
• content路径要覆盖所有src下的组件文件（你现在的路径是对的）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        offside: ["Offside", "cursive"], // 这里完全正确
      },
      colors: {
        primary: "#3A1C71",
      },
    },
  },
  plugins: [],
};

3. 正确使用字体类

确保你在需要用Offside字体的元素上加上font-offside类，比如：

<h1 className="font-offside text-3xl">这是用Offside字体的标题</h1>

4. 清理缓存重启服务

Next.js的缓存有时候会导致样式不更新，建议：

• 关掉当前的开发服务器
• 删除项目根目录下的.next文件夹
• 重新启动开发服务器（npm run dev/yarn dev）

为什么之前换指令会崩？ #

你提到换成@tailwind base;等三个指令后CSS崩了，是因为你的@theme inline是Tailwind的自定义主题语法，它需要和@import "tailwindcss"配合才能正常注入变量；直接替换成三个核心指令会导致自定义主题变量失效，依赖这些变量的背景色、文字色自然就乱了。而我们把自定义样式放到@layer base里，既保留了原有导入方式的兼容性，又让Tailwind能正确处理字体的优先级。

按这个步骤改完，Offside字体应该就能正常显示了，如果还是不行，可以打开浏览器控制台的「网络」标签，看看Google字体的请求是否成功加载，有没有404或者加载失败的提示~

内容来源于stack exchange