JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<textarea id="t"></textarea>

CSS

#test{
	position:absolute;
	left:-10000px;
	top:-10000px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:auto;
	white-space:pre-wrap;
	word-break:break-all;
}

JavaScript

$(function () {
	var div = $('<div id="test">').appendTo($(document.body)),
		ta = $('#t'),
		cs = getComputedStyle(ta.get(0), null),
		lh = parseFloat(cs.lineHeight),
		styles = {};

	if (!lh) {
		div.html('*');
		lh = div.get(0).clientHeight - parseInt(cs.paddingTop) - parseInt(cs.paddingBottom);
	}

	$([
		'paddingTop',
		'paddingRight',
		'paddingBottom',
		'paddingLeft',
		'fontSize',
		'fontFamily',
		'lineHeight',
		'transform'
	]).each(function (index, property) {
		styles[property] = cs[property];
	});

	ta.on('input mouseup stroke.count', handler);
	ta.trigger('stroke.count');
	ta.get(0).addEventListener('DOMAttrModified', handler, false);

	function handler (e) {
		styles.width = ta.get(0).clientWidth;
		div.html(ta.val().replace(/[\r\n]/g, '<br>*') || '*').css(styles);
		ta.css({
			height: Math.round(div.get(0).clientHeight) + 'px'
		});
	}
});