search

tailwindlabs / tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
https://tailwindcss-forms.vercel.app
MIT License
4.22k stars 223 forks source link

input should always default to [type='text'] styling. #127

Closed synchronizing closed 2 years ago

synchronizing commented 2 years ago

What version of Tailwind CSS are you using?

v3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Using it with django-tailwind and django-minify-html. Under the hood Django Minify uses minify-html.

What version of Node.js are you using?

v18.7.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction URL

N/A

Describe your issue

Minify HTML replaces all <input type="text" ...> with simply <input ...> since input's default style should always be text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.

https://www.w3.org/TR/html401/interact/forms.html This attribute specifies the type of control to create. The default value for this attribute is "text".

As it currently sits, Tailwind does not default this when generating the style sheet for input. Instead, it generates the following:

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
...
}

input should be included in the above styling.

input,[type='text'],[type='email'],...

If this is not possible, is there any way to create a plugin in the tailwind.config.js file to append input to the style mentioned above? Thanks!

Relates to minify-html#95.

thecrypticace commented 2 years ago

Hey! It's a but unfortunate that we have to do this but this one is on purpose. If we applied these styles to other inputs that we don't explicitly style (like type=range) it could produce unexpected results. Because of this we call this one out explicitly in the readme for the forms plugin:

Note that for text inputs, you must add the type="text" attribute for these styles to take effect. This is a necessary trade-off to avoid relying on the overly greedy input selector and unintentionally styling elements we don't have solutions for yet, like input[type="range"] for example.

A workaround for the minifier issue you've encountered would be to add class="form-input" to the input element.

synchronizing commented 2 years ago

A workaround for the minifier issue you've encountered would be to add class="form-input" to the input element.

Thank you for the workaround. Seems to work as intended, though the code generation is less optimal (a new and equivalent section is created for .form-input, which isn't a major issue, but def. something that could perhaps be optimized). Nonetheless, thanks.

karlhorky commented 1 year ago

@thecrypticace @RobinMalfait would you consider adding an option to switch to a negation selector instead, for users who do not want the default type="text" in their codebase?

Eg.

/* Select <input /> elements without `type` */
input:not([type])

Or even reconsider this as the default, like this:

input[type="text"], input:not([type])

We have an ESLint rule which bans type="text" on <input> elements (because it's the default), and would love to be able to keep using this and still add @tailwind/forms...

karlhorky commented 1 year ago

Opened a PR for feedback for defaulting to input:not([type]):