JSFiddle - React, Tailwind, and code Playground
HTML
Any textarea:
<textarea>Enter multiline text...</textarea>
CSS
textarea, div.textarea
{
resize:none; /* vertical-auto request instead of the JS */
width:100%;
border:2px solid #00f;
overflow:hidden;
height:auto;
padding:3px;
margin:none;
box-sizing:border-box;
font-family:"Arial";
font-size:12px;
word-wrap:break-word;
white-space:pre-wrap;
}
JavaScript
function resize(textarea)
{
var divArea=textarea.previousSibling;
divArea.innerText=textarea.value+"\r\n";
}
function startTextAreaAutoSize()
{
var textarea=document.querySelectorAll('textarea');
for(var i=textarea.length-1; i>=0; i--)
{
var divContainer=document.createElement("div");
divContainer.setAttribute("style","border:none; padding:0px; margin:0px; display:block; background:none; position:relative;;");
var divArea=document.createElement("div");
divArea.setAttribute("class","textarea");
divArea.setAttribute("style","height:auto; word-wrap:break-word; overflow:hidden; display:block; visibility:hidden;");
divContainer.appendChild(divArea);
textarea[i].parentNode.insertBefore(divContainer, textarea[i].nextSibling);
divArea.innerText=textarea[i].value+"\r\n";
divArea.setAttribute("role","none presentation");
divContainer.appendChild(textarea[i]);
textarea[i].setAttribute("style","position:absolute; height:100%; width:100%; left:0px; top:0px;");
textarea[i].addEventListener("input",function(e){resize(e.target); return false;},false);
}
}
startTextAreaAutoSize();