I've noticed that some tailwind styles are not applying to MDX components settings on NextJS. More precisely, the font sizes, such as text-4xl stopped working while font-bold still works. Margins also stopped working but fonts are still fine. Here's the mdx-components.tsx file:

import type { MDXComponents } from "mdx/types";
import { Nunito, Work_Sans } from "next/font/google";

const nunito = Nunito({ subsets: ["latin"] });
const work_sans = Work_Sans({ subsets: ["latin"] });

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }: any) => (
      <h1
        className={`${work_sans.className} text-4xl md:text-4xl font-bold mt-4`}
      >
        {children}
      </h1>
    ),
    h2: ({ children }: any) => (
      <h2
        className={`${work_sans.className} text-2xl md:text-2xl font-semibold mt-2`}
      >
        {children}
      </h2>
    ),
    p: ({ children }: any) => (
      <p
        className={`${nunito.className} text-md md:text-md font-regular opacity-80`}
      >
        {children}
      </p>
    ),
    ul: ({ children }: any) => (
      <ul
        className={`${nunito.className} list-disc text-md md:text-md font-regular opacity-80`}
      >
        {children}
      </ul>
    ),
    ...components,
  };
}