JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<textarea>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum illo quas repudiandae explicabo est sit earum, porro, ipsum nobis ratione debitis accusamus dolorum assumenda doloremque eius, magni inventore at perferendis id tempora? Alias quos eveniet sit impedit deleniti, deserunt consequatur cumque nostrum libero nesciunt, quis beatae tempora, in qui obcaecati velit earum aut ex. Totam perspiciatis dolores placeat eos. Eum, beatae cum ad et recusandae molestias repellat perferendis accusantium itaque laborum velit quo ullam perspiciatis id at reprehenderit, dolore delectus facilis eos excepturi. Quia repellendus exercitationem, et perferendis neque omnis? Ea beatae architecto nulla a iusto voluptatum hic quibusdam voluptate quas temporibus? Inventore maxime facere nisi magnam aperiam rem officiis dolore recusandae debitis! Nam sapiente quas voluptas quaerat, dolores natus eaque aliquam enim quos consequuntur aspernatur, numquam, tempore quae sint. Eius quae, repellendus quod inventore atque molestias. Alias, blanditiis? Hic sed tempora reprehenderit, possimus, deleniti commodi laudantium perferendis harum laborum molestias, nisi optio fugiat obcaecati dolor vel odio autem sequi ex? Iste perferendis dolore commodi obcaecati hic dolorum quod dicta, reiciendis exercitationem temporibus placeat dolorem repudiandae modi corrupti eos soluta, sint tempora at nemo officia dignissimos. Id ea alias, dignissimos deserunt blanditiis ipsum exercitationem beatae eum molestiae minima veritatis odio unde laboriosam nisi ratione ab et voluptatibus quidem libero nostrum, consequuntur ex voluptatem vel. Officia, repellat nulla? Officia facilis perspiciatis ipsam, eum autem nobis voluptas tempore. Ipsa suscipit officia ad cumque laboriosam veritatis ratione vero, odio velit temporibus sit error cum distinctio rerum, quos consectetur fugiat quae quo nam magni ipsam, possimus pariatur quis facere. Quo itaque fugit recusandae aspernat
</textarea>

JavaScript

var tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx.setAttribute("style", "height:" + (tx.scrollHeight) + "px;overflow-y:hidden;");
  window.addEventListener("resize", autoResize(tx));
}

function autoResize(el) {
  el.style.height = "auto";
  el.style.height = (this.scrollHeight) + "px";
}