Front-end (Next.js) - font and position of header are not working properly

Question

Hi I'm going through this tutorial from Patrick Collins - https://www.youtube.com/watch?v=8bMrko6iD9Q&t=4994s Should look like the first pic (Bold word of Lottery and Connect Wallet should be located on the right side) but mine looks like the second... (compiling is being successful and refreshed several times as well)

My Header.js code (exact same as the tutorial) is the following

import { ConnectButton } from "web3uikit";

export default function Header() {
    return (
        <nav className="p-5 border-b-2 flex flex-row">
            <h1 className="py-4 px-4 font-bold text-3xl">Lottery!</h1>
            <div className="ml-auto py-2 px-4">
                <ConnectButton moralisAuth={false} />
            </div>
        </nav>
    )
}

Answer 1

Have you implemented the tailwind property ??

->Make sure to complete these steps to implement tailwind in your project . Link :https://tailwindcss.com/docs/guides/nextjs