Dialog and AlertDialog appear unstyled

[Giuliopime]

I can't get the style to be applied to my alert dialog and dialog, while other components like buttons are styled just fine.

Additionally, this is happening on a page, while the AlertDialog works fine in another page.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

folder structure

globals.css

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --background-secondary: 0, 0%, 98%;
    --foreground: 222.2 84% 4.9%;

    /* more vars */
  }

  .dark {
    /* colors */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html, body {
    @apply w-full h-full;
  }

  body {
    @apply bg-background text-foreground;
  }
}

cn function

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

my page.tsx

<>
  <div className="flex flex-col items-center justify-center w-full gap-4">
    <span className="text-2xl font-semibold">Welcome back!</span>

    <div className="flex gap-4">
      <Link href="/tasks" className={buttonVariants({ size: "sm" })}>
        Your tasks
      </Link>

      <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button size="sm">
            open alert dialog
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <Dialog>
        <DialogTrigger asChild>
          <Button size="sm">
            open dialog
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Are you absolutely sure?</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your account
              and remove your data from our servers.
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </div>
    <div className="p-4 flex gap-4">
      {data.map((list) => (
        <Link href={`/lists/${list.id}`} key={list.id}>
          <IxListCard name={list.name} color={list.color} icon={list.icon} />
        </Link>
      ))}
    </div>
  </div>
</>

alerts closed:

alert dialog opened:

dialog opened:

DOM from browser tools:

<div role="alertdialog" id="radix-:r0:" aria-describedby="radix-:r2:" aria-labelledby="radix-:r1:" data-state="open" tabindex="-1" style="pointer-events: auto;">
<div class="flex flex-col space-y-2 text-center sm:text-left">
<h2 id="radix-:r1:">Are you absolutely sure?</h2>
<p id="radix-:r2:">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
</div>
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"><button type="button">Cancel</button><button type="button">Continue</button>
</div>
</div>

Any help is highly appreciated