Reset letter spacing for form elements

[Stadly]

Some browsers, such as Chrome, set letter-spacing: normal for form elements. For consistency with the other styles, it should be set to inherit by Preflight.

Currently, for <div class="text-sm"><textarea>hello</textarea></div>, the <textarea> will inherit the font-size and line-height, but not letter-spacing. This PR fixes that.

[adamwathan]

Hey! Can you share a real example of where this would have been helpful? I believe it exists but always helpful to see the practical motivation 👍

[Stadly]

Sure. Sorry for the delay. Here is an example: https://stackblitz.com/edit/sveltejs-kit-template-default-fwqbwb?file=tailwind.config.js

Notice how font-size and line-height is inherited by the <input> elements, while letter-spacing is not.

[adamwathan]

Thanks! What I mean though is can you share a real design you needed to build where this was important and you ran into unexpected results without this change?

[Stadly]

Ah. For example in a simple to-do application, where you enter a new task in an <input> element and press enter to add it to the list as an <li> item. If ther developer is not aware of letter-spacing not being inherited by <input>, there will be an inconsistency between the appearance of the task before and after pressing enter. Since large values are not common for letter-spacing, it is likely that the inconsistency might go unnoticed during testing, but still impact user experience negatively.

It is of course not a big issue - it will usually be a small difference in appearance, and it can be fixed by applying the relevant text-... class to the <input> element, but I still think this is a surprising behavior and a tiny pit fall that would be nice to have mitigated :)

[thecrypticace]

Thanks!