thecrypticace
commented
1 year ago Hey, so I looked into this a bit and Daisy UI is relying on the checkbox having an "auto" width (and maybe height but would need to test across multiple browsers). The Tailwind CSS forms plugin applies base styles to all form elements and one of those sets the width/height of checkboxes to 1rem.
You have two options:
The simpler of the two is to add class="w-auto h-auto" to the checkbox. Do that and the issue goes away.
The other option would be to enable the class strategy for the forms plugin which requires the use of form-input, form-checkbox, et. al classes to style form controls:
require("@tailwindcss/forms")({
strategy: "class",
})
LeviticusMaximus
What version of @tailwindcss/forms are you using?
v0.5.3
What version of Node.js are you using?
v16
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction repository
https://play.tailwindcss.com/Q5aLXVr7ej
Describe your issue
Describe your issue In a Vue3/Vite app
I'm using a collapse element using a checkbox from DaisyUI to show/hide content.
I've now installed @tailwindcss/forms but I'm finding that the open/close by clicking on the collapse-title element no longer does its job.
I'm guessing that tailwindcss/forms is changing the Daisy behaviour for checkboxes so that the Collapse functionality gets broken.
I could possibly pass a daisy-prefix using the config option, but not sure how I can apply it to the input type=checkbox (if that's what's causing the problem?)
Anyone, can you help me?
Would be much appreciated.
Thanks