JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- el script -->
<script type="text/javascript">
    $(function(){
        $('#sin-estilos').resizeTextarea();
        $('#estilizame').resizeTextarea({
           animacion: 100 //animar por 100ms
        });    
    });
</script>

<title>Resize textarea</title>
</head>
<body>
    <textarea id="sin-estilos">Textarea con estilos de navegador</textarea><br />
    <textarea id="estilizame">Textarea estilizado</textarea>
</body>
</html>

CSS

#estilizame{
height: 100px;
 width: 200px;
    padding: 20px;
line-height: 2em;    
}

JavaScript

(function($){
    $.fn.extend({
        // nombre de tu plugin, y parámetros
        resizeTextarea: function(parametros) {
        var defaults = {
            animacion: 0,    //por defecto, no animamos
            offset: 5        //sumar este offset a la altura para corregir
        }
        
        var parametros =  $.extend(defaults, parametros);
         
            return this.each(function() {
                //aqui hacés lo que querés con el elemento
                $elem = $(this)
                $elem.css('overflow','hidden') //para que no moleste la barra
                $elem.bind('keyup',function(){
                    var $_ta = $(this);
                    var i_st = $_ta.scrollTop();
                    if(i_st){
                        $_ta.animate({
                            height: '+=' + (i_st + parametros.offset)
                        },parametros.animacion);
                    }
                });
            });
        }
    }); 
})(jQuery);