I have been trying to customize the appearance of my header item container, which includes a home icon. The issue I'm facing is that despite styling the icon and other elements within the container using Tailwind CSS classes, the changes are not reflected on the webpage. I suspect it might be a problem with Tailwind CSS configuration, but I haven't been able to pinpoint the exact cause.
Below is the code snippet for 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;
This is my tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
};
Despite configuring my styles using Tailwind CSS, there seems to be an issue with reflecting these changes on the webpage.