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

[synchronizing]

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]

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]

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]

@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]

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

• Allow for <input> without type #140
• Allow for <input> without type #141