Tailwindcss/forms and other plugin compatibility issue (DaisyUI)

[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

[thecrypticace]

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]

Thanks Ace, real helpful and very elegant solution.