Alr so here is the run down.

NextJS application - Tailwind and Daisy UI ( https://daisyui.com/ )

I have a component called Project Card ( https://daisyui.com/components/card/#card-with-badge ) - > I copied the JSX and put into my ProjCard.TSX file as at somepoint im gonna add some stuff onto it but havent yet

// We are gonna use Daisy UI card ----- https://daisyui.com/components/card/

const ProjectCard = () => {
    return (
        // Add the glass property as seen on the glass card here https://daisyui.com/components/card/#card-glass
        <div className="card bg-base-100 w-96 shadow-xl">
            <figure>
                <img
                    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
                    alt="Shoes"
                />
            </figure>
            <div className="card-body">
                <h2 className="card-title">
                    Shoes!
                    <div className="badge badge-secondary">NEW</div>
                </h2>
                <p>If a dog chews shoes whose shoes does he choose?</p>
                <div className="card-actions justify-end">
                    <div className="badge badge-outline">Fashion</div>
                    <div className="badge badge-outline">Products</div>
                </div>
            </div>
        </div>
    );
};

export default ProjectCard;

So when I import this component into my Home page.tsx file the tailwind daisy ui styles dont work ( The styles are applied in the classname on google dev tools but are not reciving the style that is supposed to be applied ( Let me know if you need me to rephrase this ) )

But if I put the raw component code inside my Page.tsx file it works fine


Below you can see my Tailwind Config and my Globals CSS