bug: Icon/Text inside .input wrapper doesn't work as it's shown in demo

[Evren Ceyhan]

What version of daisyUI are you using?

4.10.2

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://daisyui.com/components/input/#text-input-with-icon-inside

Describe your issue

 <label class="input input-bordered flex items-center gap-2">
    test
    <input ref="input" type="text" class="grow" />
  </label>
`

<img width="1518" alt="Screenshot 2024-04-28 at 19 00 43" src="https://github.com/saadeghi/daisyui/assets/3739981/518be1c0-c621-4444-ae61-0e6462241bb0">

[github-actions]

Thank you @webceyhan 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.

[Pouya Saadeghi]

It's working like the demo: https://play.tailwindcss.com/tpUPPhaV4P 🤔
Are you sure that border is not coming from another CSS plugin? like @tailwindcss/forms?

[Evren Ceyhan]

Indeed, you're right! I've removed the forms plugin and it's fixed.
So basically daisyui is not compatible with tailwind plugins?

Maybe you could mention this in the docs to avoid further confusion?

[Pouya Saadeghi]

It's important to know what exactly a plugin does when we're adding them.

tailwindcss-forms by default, applies opinionated styles to all form elements in the page. Without using any class names. It targets the <input> tags.
The border you were seeing was coming from tailwindcss-forms and there's nothing daisyUI can do about it because tailwindcss-forms is doing its job as it's supposed to do.

So, before using tailwindcss-forms I would ask myself "do I need styles on all input tags on my page"? 😅

Thankfully, tailwindcss-forms has a config to opt out of applying styles to everything by default, and instead applying styles to specific form elements using the class strategy.

daisyUI is compatible with tailwindcss-forms if you use their class strategy