Next.js Pages路由模态框Tailwind指定字体丢失问题求助

我在Next.js（Pages路由）环境中，使用Headless UI和Tailwind CSS开发了模态窗口组件，但这些组件未应用指定的DM Sans字体，反而显示默认的HTML基础字体。所有模态框的代码结构一致，仅内部内容存在差异。以下是组件代码及Tailwind配置文件：

模态框组件代码 #

import React, { useState } from "react"
import { DialogRoot } from "@/components/dialog/DialogRoot"
import { Dialog } from "@headlessui/react"
import { Button } from "@/components/button/Button"

const WithdrawLocksModal = () => {
  const [open, setOpen] = useState<boolean>(false)

  const handleOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <>
      <Button onClick={handleOpen}>Withdraw Selected</Button>

      <DialogRoot open={open} onClose={handleClose}>
        <Dialog.Panel className="flex flex-col gap-12 items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-2xl py-4 dark:bg-base-dark-0 dark:text-white">
          <button
            onClick={() => setOpen(false)}
            className="absolute right-4 top-4"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M17 7L7 17M7 7L17 17"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
          <Dialog.Title className="text-xl text-center">
            Withdraw Locks with Penalty
          </Dialog.Title>
          <div className="flex flex-col gap-6 w-full">
            <div className="flex flex-col gap-3 px-4">
              <div className="flex justify-between">
                <span className="text-zinc-700 dark:text-zinc-400 text-sm font-normal font-sans leading-tight">
                  Received
                </span>
                <span className="text-zinc-900 dark:text-white text-sm font-medium font-sans leading-tight">
                  283NPR
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-zinc-700 dark:text-zinc-400 text-sm font-normal font-sans leading-tight">
                  Penalty
                </span>
                <span className="text-zinc-900 dark:text-white text-sm font-medium font-sans leading-tight">
                  53NPR
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-zinc-700 dark:text-zinc-400 text-sm font-normal font-sans leading-tight">
                  Total Locked PRISMA
                </span>
                <div className="flex gap-1 items-center">
                  <span className="text-zinc-900 dark:text-white text-sm font-medium font-sans leading-tight">
                    283
                  </span>
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M3.3335 7.99998H12.6668M12.6668 7.99998L8.00016 3.33331M12.6668 7.99998L8.00016 12.6666"
                      stroke="#FA5454"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                  <span className="text-rose-500 text-sm font-medium font-sans leading-tight">
                    0
                  </span>
                </div>
              </div>
            </div>
            <div className="border-t border-gray-300 dark:border-zinc-700 pt-4 px-4">
              <p className="text-white mb-5 text-sm font-normal font-sans leading-tight">
                Please note that this transaction will reset your vote weight
                and Current Votes
              </p>
              <Button>Extend Locks</Button>
            </div>
          </div>
        </Dialog.Panel>
      </DialogRoot>
    </>
  )
}

export default WithdrawLocksModal

Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme")

module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        sm: "100%",
        md: "100%",
        lg: "1300",
        xl: "1300px",
        "2xl": "1300px",
      },
    },
    fontSize: {
      xs: ["0.75rem", "1rem"],
      sm: ["0.875rem", "1.25rem"],
      base: ["1rem", "1.5rem"],
      lg: ["1.125rem", "1.75rem"],
      xl: ["1.25rem", "1.875rem"],
      "2xl": ["1.5rem", "2rem"],
      "3xl": ["2rem", "2.5rem"],
      "4xl": ["2.5rem", "3.125rem"],
      "5xl": ["3rem", "3.75rem"],
      "6xl": ["4.5rem", "5rem"],
    },
    fontFamily: {
      sans: ["var(--font-primary)", ...defaultTheme.fontFamily.sans],
      secondary: ["Roobert", ...defaultTheme.fontFamily.serif],
      serif: [...defaultTheme.fontFamily.serif],
      mono: [...defaultTheme.fontFamily.mono],
    },
    extend: {
      borderRadius: {
        "4xl": "3rem",
      },
      colors: {
        "tw-gray": {
          50: "#0E111B",
        },

        "base-dark": {
          0: "#13161E",
          50: "#1F2125",
          200: "#C6C8D0",
          300: "#ACAEB6",
          500: "#787B83",
          600: "#5F6169",
          800: "#2D3038",
          900: "#14171E",
        },
        "napier-base": {
          0: "#ffffff",
          50: "#eff0f5",
          75: "#363843",
          100: "#dbdeeb",
          200: "#d2d4dc",
          400: "#9A9DA8",
          500: "#73757c",
          700: "#5d5f68",
          800: "#45484e",
          900: "#13161e",
        },
        "napier-base-dark": {
          0: "#13161E",
          50: "#45484E",
          100: "#5D5F68",
          200: "#73757C",
          400: "#9A9DA8",
          500: "#A2A4AD",
          700: "#D1D3DE",
          750: "#3A3C44",
          800: "#EFF0F5",
          850: "#20232B",
          900: "#FFFFFF",
        },
        "accent-blue": "#2338f1",
        "accent-blue-loading": "#848DDF",
        "accent-green": "#29A77A",
        "accent-red": "#FF4949",
        "hover-blue-btn": "#3E4BC0",
        muffledBlue: "#5A55F4",
      },
      screens: {
        "-2xl": "1480px",
        "-xl": "1376px",
        "-lg": "1116px",
        "-md": "767px",
        "-sm": "639px",
      },
      backgroundImage: {},
      keyframes: {
        fallingDown: {
          "0%": { transform: "translateY(0)" },
          "100%": { transform: "translateY(100%)" },
        },
      },
      animation: {
        fallingDown: "fallingDown 2.5s linear infinite",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
}

问题排查与解决步骤 #

1. 确认CSS变量--font-primary已绑定DM Sans字体 #

你的Tailwind配置中sans字体依赖var(--font-primary)变量，但该变量未被定义时，会自动回退到默认字体。需要用Next.js的字体工具导入DM Sans并绑定变量：

// 在pages/_app.tsx中
import { DM_Sans } from 'next/font/google';
import type { AppProps } from 'next/app';

// 导入DM Sans字体，生成CSS变量
const dmSans = DM_Sans({
  subsets: ['latin'],
  weight: ['400', '500'], // 根据需求指定字体权重
  variable: '--font-primary',
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    // 给根元素添加字体变量类和默认sans字体类
    <div className={`${dmSans.variable} font-sans`}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

2. 给Headless UI组件显式添加字体类 #

Headless UI的Dialog组件可能自带默认样式，覆盖了字体继承。需要给核心元素添加font-sans类：

• 给Dialog.Panel的className追加font-sans
• 给Dialog.Title的className追加font-sans

3. 检查全局样式导入 #

确保pages/_app.tsx中已导入Tailwind基础样式文件（通常是globals.css），文件内容需包含：

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

4. 清除缓存重启服务 #

开发服务器缓存可能导致样式不更新，重启Next.js服务并清除浏览器缓存后再测试。

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