I'm using Next.JS 13.4.7 with TypeScript and TailwindCSS.

I have the following app/pages.tsx file:

import Contact from "@/pages/contact"

export default function Layout() {
  return (
    <main className="flex justify-center p-20 w-full">
      <Contact />
    </main>
  )
}

which displays the pages/contact.tsx page:

import TextInput from "@/components/text_input"
import Button from "@/components/button"

export default function Contact() {

  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full max-w-xl text-slate-700">
      <h1 className="text-xl">Personal Information</h1>
      {// ...}
      <div className="flex w-full justify-end">
      <Button href="/work_experience">Next {">"}</Button>
      </div>
    </div>
  )
}

When clicking on the button link, I'm redirected to the pages/work_experience.tsx page (similar to contact page), but without any styling, it's just pure HTML ...

Why is that? What do I need to do to have styling?

Also when I visit the root path and then append /contact to the URL in the browser, even my contact page has no styling.