Inputs invisible by default

[emil-nasso]

We started using tailwind in an old app that has a mix of custom styles, unstyled pages and semantic ui. On the pages with unstyled inputs the inputs was missing borders and was basically invisible.

It seems to be caused by this selector removing all borders from all elements, even inputs and buttons. Is that intentional?

https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css#L532

We fixed it by adding some default styling to inputs, textareas and buttons.

input, textarea {
    @apply .border .rounded;
}

button, input[type=button], input[type=submit] {
    @apply .border .p-2 .shadow;
}

[adamwathan]

Yeah it intentionally resets everything to the same state border-wise so that applying borders is consistent across elements. The main motivation was that we wanted to be able to just say class="border" and have it work by only applying a width instead of having it apply a width, style, and color, because that made it impossible to override things nicely at different breakpoints.

If you're layering Tailwind on top of existing CSS, it's probably best to not use the preflight styles and just use the utilities, because your site likely already has some base style stuff setup so preflight will be redundant at best, and conflicting at worst. We should add this to the documentation 👍

Tailwind's utilities don't really depend on any of the preflight styles anyways (with one caveat); they are just a nice starting point for brand new sites.

The one caveat is the border stuff, in that if you want class="border-2" to work on it's own, you'll need our border reset. Alternatively though you can always say class="border-solid border-2 border-grey-light" or similar, which will work fine without the preflight border styles.

Here's the PR that added this; lots more detail there: #116