Auto-size input and text area

[tobiasdiez]

For some strange reason, it is not possible to auto-size input and textarea to fit their content using HTML & CSS only. There are a few simple workarounds that for example use a hidden div to determine the correct size, and then resize the input control accordingly.
For example, the following is the tailwind version of https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/

<div class="grid">
    <div
      class="
        whitespace-pre-wrap
        text-xl
        row-span-1
        col-span-1 col-start-1
        row-start-1
        py-2
        px-3
        invisible
      "
    >{{ value + ' ' }}</div>
    <t-textarea
      v-model="value"
      class="
        text-xl
        resize-none
        overflow-hidden
        row-span-1
        col-span-1 col-start-1
        row-start-1
      "
    ></t-textarea>
  </div>
</div>

(similar code for the input control can be found at https://css-tricks.com/auto-growing-inputs-textareas/)
It works but is tricky to maintain as changes in the style of the textarea (e.g. padding or text size) need to applied also to the hidden measurement div.

It would be nice if vue-tailwind could provide a simple auto-size: boolean toggle on t-input and t-textarea that would create the above wrapper with the correct styles applied.