nextjs custom tailwind css font

app_globals.css

@import '@fontsource/fira-mono/400.css';
@import '@fontsource-variable/inter';
@import "@fontsource-variable/inter/wght.css"; 
@import "@fontsource-variable/inter/wght-italic.css"; 
@tailwind base;
@tailwind components;
@tailwind utilities;

package.json

"@fontsource-variable/inter": "^5.1.1",
"@fontsource/fira-mono": "^5.1.1",

tailwind.confg.ts

import type { Config } from "tailwindcss";
import daisyui from 'daisyui'
import theme from 'tailwindcss/defaultTheme'

export default {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter Variable', ...theme.fontFamily.sans],
        mono: ['Fira Mono', ...theme.fontFamily.mono],
      },
    },
  },
  plugins: [daisyui],
} satisfies Config;