Allow for <input> without `type`

[karlhorky]

Allow for <input /> elements without the type attribute (eg. which defaults to a text input), which may be required by certain codebases:

<input /> <!-- same as input with type="text" -->

Also removed the note from the readme, which isn't required anymore if my approach works

Preview looks good - allows for overriding via A) utility classes and also B) input selector:

Ref:

• Original proposal by @synchronizing https://github.com/tailwindlabs/tailwindcss-forms/issues/127

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-forms	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 13, 2023 2:49pm

[adamwathan]

Hey! This won't quite work because input:not([type]) has a specificity of 0,1,1 which means it is higher than a class, so you couldn't add utilities to the input to override the default styles:

I think the right solution is probably input:where(:not([type])) but should make sure to test it thoroughly 👍

[karlhorky]

This won't quite work because input:not([type]) has a specificity of 0,1,1 which means it is higher than a class

Oh, I'm probably not aware of the deeper details and how @tailwindcss/forms works - just heard about the project today :)

I think the right solution is probably input:where(:not([type])) but should make sure to test it thoroughly 👍

Sure, ok - after https://github.com/tailwindlabs/tailwindcss-forms/pull/141/commits/b6b4c5ae6067d156d6f6a7622a9d49801ac05554 I have :where() in there as well now. Happy to test this, although I'm not 100% sure I know what I'm looking for (eg. what would be a pattern I could use to test the overriding?)... here's a screenshot of the DevTools with the updated preview:

[karlhorky]

@adamwathan Maybe this is what you mean by overriding? (added py-12 to the input, which appears to be applied)

[adamwathan]

@adamwathan Maybe this is what you mean by overriding? (added py-12 to the input, which appears to be applied)

Yep exactly! As long as you can override any of the styles set by the plugin by adding a utility then we should be good 👍

[karlhorky]

Great, nice 👍 This also works with the input selector (I documented in the PR description above).

Anything else that I should to do before this is ready to merge?

[adamwathan]

Nope I think this looks good now, thank you!

[karlhorky]

Great, glad to help :) Thanks for the guidance, review and merge! 🙌

[karlhorky]

@adamwathan (or @thecrypticace, @bradlc, @RobinMalfait) could this be published as a new release? (I'm guessing @tailwindcss/forms@0.5.4 or @tailwindcss/forms@0.6.0)

[adamwathan]

@karlhorky Yep we'll publish a release when we get a chance, no guarantees it'll be today but soon.

In the mean time you can use the insiders build that is automatically published on every commit:

npm i @tailwindcss/forms@insiders

[thecrypticace]

I published v0.5.4 so there's a proper tag now ✨

[karlhorky]

Great, thanks!

[abouroubi]

I think this should have been a breaking change, it added borders to all our input fields, where the border wasn't present before.

[karlhorky]

@abouroubi sorry to hear! To be clear, your input elements do not have a type attribute?

[abouroubi]

No they did not have type attribute.

[vixeven]

I think this should have been a breaking change, it added borders to all our input fields, where the border wasn't present before.

Likewise in my case, many of my custom inputs now have border + focus-ring after the update. I had to switch to a previous version :/