Adding NuxtUI affects regular HTML <input/>

[kstraszewski]

Version

@nuxthq/ui: v2.3.0
nuxt: v3.5.0

Reproduction Link

https://stackblitz.com/edit/nuxtlabs-ui-3bkhpx?file=app.vue

Steps to reproduce

Just check css of regular html <Input/>

What is Expected?

Regular HTML <input/> should have zero CSS applied.

What is actually happening?

Adding NuxtUI to project adding some tailwindCSS to base input. It should only apply those CSS to UInput. It makes it impossible to start transition from other frameworks to NuxtUI. Im using Vuetify for now, and it would be great to use vuetify along NuxtUI and some of the Pages in Nuxt just using without Vuetify, but i can't coz when I add NuxtUI to project it automatically corrupting all of the inputs inside project :/ It forces developer to remove primary library, and then add NuxtUI which makes transition impossible.

[jaybharadia]

Hi @kstraszewski
I have checked the issue.
According to my understanding,

• The input background color : white is disturbing (text is not visible ) and important bug to notice 🤔 .
• Other UI styles are applied that is okay.

Please confirm. I am also attaching the screenshot here

[kstraszewski]

I mean in my opinion tailwind shouldn't apply any CSS to base <input/> only for <UInput/>. If any of the base HTML elements will have applied CSS it will make any hybrid transition impossible. I have Vuetify in my project, but i would like to start moving to something lighter than vuetify, NuxtUI seems great, but it would be great if I could use both for some time and slowly removing Vuetify. It is not possible for now, coz NuxtUI is applying styles to every <input/> it can find and corrupting Vuetify input <v-text-field/> (which convert into <input/> in DOM)

Regular HTML <input/> should look like this to make any transition possible:

[benjamincanac]

I'm afraid this is because of tailwindlabs/tailwindcss-forms plugin which resets form styles. I'll try to submit a fix!