Fonts in Tailwind have come off

Question

I created components for modal windows in Next.js (Pages router) using Headless UI and Tailwind and for some reason they lost the required fonts. Here is the code of the components:

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

The code is the same for all modals, except for the modal content itself. The font should be DM Sans, but it is replaced by the base HTML font. I've been poking around in this for who knows how long, I still don't even know where to dig. If it can help in any way, here is the Tailwind config:

/** @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")],
}