JSFiddle - React, Tailwind, and code Playground

by Johan Preynat

HTML

<textarea id='area' placeholder='Your text here'>
</textarea>

CSS

#area {
  /* Override needed textarea customized in iframe.css */
  width:  300px;
  height: 300px;
  border:  0;
  padding: 0;
  margin:  0;

  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.5);    
  position : absolute;
  outline:none;
  resize:none;

  overflow: hidden;
  vertical-align: top;
  text-align: center;
  letter-spacing: 2px;
  font-size: 17px;
}

JavaScript

$.fn.realHeight = function(textArea) {
    return parseInt(textArea.css('height'), 10)
         - parseInt(textArea.css('padding-top'), 10)
         - parseInt(textArea.css('padding-bottom'), 10);
}

$.fn.realWidth = function(textArea) {
    return parseInt(textArea.css('width'), 10)
         - parseInt(textArea.css('padding-left'), 10)
         - parseInt(textArea.css('padding-right'), 10);
}

$.fn.textWidth = function(textArea) {
    if (!$.fn.textWidth.fakeEl) {
        $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    }
    
    $.fn.textWidth.fakeEl.text(textArea.val())
                           .css('font-family', textArea.css('font-family'))
                           .css('font-size', textArea.css('font-size'))
                           .css('font-weight', textArea.css('font-weight'))
                           .css('letter-spacing', textArea.css('letter-spacing'));
    
    return $.fn.textWidth.fakeEl.width();
};

var textArea = $('#area'),
    textAreaHeight = $.fn.realHeight(textArea);
textArea.css('font-size', textAreaHeight);
textArea.on('keyup',keyupHandler);

var keyupHandler = function(e) {
    e.preventDefault(); 
    var width = $.fn.realWidth($(this));
    var height = $.fn.realHeight($(this));
    var textWidth = $.fn.textWidth($(this));
    var maxFontSize;
    
    console.log(textWidth);
    
    if(textWidth > width) {
        maxFontSize = Math.floor(width / textWidth);
        $(this).css('font-size', maxFontSize);
    }
}