React Component with styling does not work when imported into pages folder

Issue

I have a component in my components folder with styling on it:

// import Link from "next/link";
import {Link} from "react-scroll"
export default function Navbar() {
  return (
    <div className="fixed w-full h-[79px] flex justify-between items-center px-4 bg-[#0a192f] text-gray-300">
      <div>
        <h1 className=" font-thin text-2xl italic font-serif">John Doe</h1>
      </div>
      {/* menu */}
      <ul className="hidden md:flex gap-x-8">
        <li>
          <Link smooth={true} duration={500} to="">Home</Link>
        </li>
        <li> 
          <Link smooth={true} duration={500} to="/about">About</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/skills">Skills</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/cv">Work</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/projects">Projects</Link>
        </li>
        <li>
          <Link smooth={true} duration={500} to="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  );
}

When I try to import that component into my pages folder and use it, none of the styling loads in, but the component does. So I'll see: John Doe, home, about, skills, etc, but not the styling applied.

Please let me know if I am misunderstanding something or doing styling the wrong way.

Solution

Turns out, reading the docs can change your life. https://nextjs.org/docs/pages/building-your-application/styling/tailwind-css

needed to add _app.tsx

Answered By - jpr