bug: checkbox not working

[kknono]

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://daisyuinuxt3-ac3l--3000--c3e5e364.local-credentialless.webcontainer.io

Describe your issue

Hi, I have used a prefix added to the front of the daisyUI classes, and other components are working fine. However, the checkbox component is not. The code is as follows:

When used in combination with Flowbite, the checkmark inside the checkbox appears very small when checked, which is inconsistent with the default daisyUI appearance."

Please need more help. thanks

[github-actions[bot]]

Thank you @kknono for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

I can't see the link. Can you check if the link you shared is correct?

Could not find project

[kknono]

Sorry, the correct address is: https://stackblitz.com/edit/daisyui-nuxt3-qhzjs2?file=package.json

[kknono]

[saadeghi]

Unfortunately Flowbite is applying styles to [type='checkbox'] by default regardless if you use their class names or not. daisyUI only applies styles to .checkbox class name (.dy-checkbox with your custom prefix in this example) so either you use daisyUI or not, that [type='checkbox'] style is being applied by Flowbite and we can't change it because:

1. [type='checkbox'] has higher CSS specificity than a .checkbox class name
2. We don't want to apply styles to checkboxes without .checkbox class name since we don't want to create this kind of conflict with other libraries.

You can open an issue about this on Flowbite repo. Or you can disable their default forms styles like this:

require('flowbite/plugin')({
  forms: false,
}),

https://stackblitz.com/edit/daisyui-nuxt3-f2yshy?file=tailwind.config.js,app.vue

Let me know if you have a question.

[kknono]

Thank you for the explanation!