Field type collision

[jenstornell]

What version of @tailwindcss/forms are you using?

0.3.2

What version of Node.js are you using?

15.0.1

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

Nope

Describe your issue

Tailwind Forms add something like this in the CSS file.

[type='text'] {
}

When using components we can add whatever attributes we want. It may look like this:

<hello-component type="text"></hello-component>

What happends is that in my case I've got a rectangle around my element. That is not expected because this is not an input.

Suggested solution

Add input before type text. No other elements supports type='text' so there is no reason to target all elements here.

input[type='text'] {
}

[adamwathan]

Hey! Unfortunately this would raise the specificity of the selector and prevent you from overriding the defaults with utility classes. If you have a collision like this I would recommend using the class strategy instead:

https://github.com/tailwindlabs/tailwindcss-forms#using-classes-instead-of-element-selectors