Next.js项目部署Vercel时next/font与@tailwindcss/postcss模块缺失问题

本地运行正常，但部署Vercel时编译失败，报错信息如下：

Failed to compile.
node_modules/geist/dist/sans.js
An error occurred in next/font.
Error: Cannot find module '@tailwindcss/postcss'
Require stack:

• /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
• /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js
• /vercel/path0/node_modules/next/dist/build/webpack/config/index.js
• /vercel/path0/node_modules/next/dist/build/webpack-config.js
• /vercel/path0/node_modules/next/dist/build/webpack-build/impl.js
• /vercel/path0/node_modules/next/dist/compiled/jest-worker/processChild.js
  at Function. (node:internal/modules/cjs/loader:1225:15)
  at /vercel/path0/node_modules/next/dist/server/require-hook.js:55:36
  at Function.resolve (node:internal/modules/helpers:146:19)
  at loadPlugin (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:53:32)
  at /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:56
  at Array.map ()
  at getPostCssPlugins (/vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:185:47)
  at async /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:125:36
  at async /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:94:33
  at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:157:20)

项目相关文件代码 #

Layout.tsx #

import type { Metadata } from "next";
import "./globals.css";
import { GeistSans } from "geist/font/sans";

export const metadata: Metadata = {
  title: "Agustin Tamagnone",
  description: "Portfolio Agustin Tamagnone",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body className={`${GeistSans.className} font-sans`}>
        {children}
      </body>
    </html>
  );
}

tailwind.config.ts #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        geist: ['var(--font-geist)'],
      },
    },
  },
  plugins: [],
}

global.css #

@import "tailwindcss";
    
: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);
  font-family: var(--font-sans), sans-serif;
}

next.config.ts #

import type { NextConfig } from "next";
    
const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: true,
  transpilePackages: ["geist"],
};

export default nextConfig;

已尝试重装Tailwind、运行Next.js推荐的Codemod命令，修改多个配置文件，但问题仍未解决。请问这是next/font的问题，还是@tailwindcss/postcss模块找不到的问题？

解决方案 #

核心问题是**@tailwindcss/postcss模块缺失**，next/font只是触发编译时的PostCSS配置检查，导致报错暴露出来，以下是针对性解决步骤：

• 安装缺失依赖：执行命令安装@tailwindcss/postcss，确保它被添加到devDependencies中

  npm install @tailwindcss/postcss --save-dev
  # 或使用yarn
  yarn add @tailwindcss/postcss --dev
  

• 配置PostCSS文件：在项目根目录创建或更新postcss.config.js，添加Tailwind的PostCSS插件

  module.exports = {
    plugins: {
      '@tailwindcss/postcss': {},
      autoprefixer: {}, // 按需添加其他PostCSS插件
    },
  };
  

• 清理缓存重新部署：本地删除.next、node_modules和锁文件后重新安装依赖，测试编译；Vercel部署时清空缓存再触发部署

• 简化字体配置：移除Layout.tsx中GeistSans.className的直接引用，依赖global.css定义的变量即可，同时调整tailwind.config.ts的字体配置避免重复：

  fontFamily: {
    sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
  },
  

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