React component not working with daisyui

[alexribeirodesa]

here a very simple react+nextjs component to draw the avatar using the code from sample with no modification:

export function Avatar(props) {

return(
    <div className="avatar">
        <div className="w-10 mask mask-squircle">
            <img src="https://api.lorem.space/image/face?hash=47449" />
        </div>
    </div>
)

}

the result is this:

I'm doing something wrong?? I miss something??

thx

[saadeghi]

Make sure the path to all your react files is specified in content config in tailwind.config.js

content: [
  './pages/**/*.{html,js,jsx,ts,tsx}',
  './components/**/*.{html,js,jsx,ts,tsx}',
  './anything/**/*.{html,js,jsx,ts,tsx}',
],

If this doesn't fix the issue, please share a small repo so I can reproduce the problem

[MehdiHali]

the solution worked very well for me ! thanks. i hope if you can add that somewhere in the Docs so that others not repeat the same mistake.

[saadeghi]

Well... this is not about daisyUI. It's a necessary Tailwind CSS config and it's already documented on the official Tailwind CSS website.