Closed synchronizing closed 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.
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.
@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
...
Opened a PR for feedback for defaulting to input:not([type])
:
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 ...>
sinceinput
's default style should always betext
.As it currently sits, Tailwind does not default this when generating the style sheet for
input
. Instead, it generates the following:input
should be included in the above styling.If this is not possible, is there any way to create a plugin in the
tailwind.config.js
file to appendinput
to the style mentioned above? Thanks!Relates to minify-html#95.