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

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 ) )

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;

tailwind config

import type { Config } from "tailwindcss";
import Home from "./src/app/page";

const config: Config = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
    },
  },
  plugins: [
    require('daisyui'),
  ],
};
export default config; 

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
  }
}

If I put the raw component code inside my Page.tsx file it works fine but I need it in my components folder as I wanna use it multiple times.

This also happens to all the components in the DaisyUi components that I import.