How should i style the content using Tailwind CSS?

I’m trying to style my header item container and inside that i have a home icon and i’m pulling that icon from the header page and everything is working like if i try to give header or p tag but when i’m styling the icon or any p tag etc. i’m not getting any results on the webpage i think it must be tailwind css problem but i’m not able to figure out what is it.

This is the Header.js

import {
    BadgeCheckIcon,
    CollectionIcon,
    HomeIcon,
    LightningBoltIcon,
    SearchIcon,
    UserIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import HeaderItem from "./HeaderItem";

function Header() {
  return (
    <header className="">
        <div>
            {/* This is for icons that i'm using on the components section */}
            <HeaderItem title ='HOME' Icon = {HomeIcon}/>
        </div>
        {/* This is the logo image we are going to add in header component */}
        <Image
            className="object-contain"
            src='/images/hulu.png' 
            width={200} 
            height={100}
        />
    </header>
  )
}

export default Header

and this is HeaderItem.js

function HeaderItem({ Icon, title }) {
  return (
    <div>
        <Icon className='h-8 mb-1'/>
        <p className="opacity-0 hover:opacity-100 tracking-widest">{title}</p>
    </div>
  );
}

export default HeaderItem;

you can see ii was styling using tailwind but it is not reflecting on my webpage.