JSFiddle - React, Tailwind, and code Playground

HTML

<div class="console"></div>

<div class="brick small"></div>

CSS

.brick
{
}

.transition
{
  transition: all 0.4s ease-in-out;
}

.large
{
  width: 400px;
  height: 400px;
}

.small
{
  width: 200px;
  height: 200px;
}

TypeScript

function log(text)
{
	$(".console").html($(".console").html() + text + "<br/>");
}

log("Initial dimensions are height: " + $('.brick').height() + ", width: " + $('.brick').width());
log("Applying final style");
$('.brick').removeClass('small').addClass('large');
log("Final dimensions are height: " + $('.brick').height() + ", width: " + $('.brick').width());
log("Restoring initial style");
$('.brick').addClass('small').removeClass('large');
log("Restored dimensions are height: " + $('.brick').height() + ", width: " + $('.brick').width() + " ** important to call height() or width() here, before adding classes with transitions back, else we do not force layout to recompute and the transition will not work.");
log("Applying final style with transition");
$('.brick').removeClass('small').addClass('large transition');
log("Dimensions at beggining of transition: " + $('.brick').height() + ", width: " + $('.brick').width());
setTimeout(function () {log("Dimensions at end of transition: " + $('.brick').height() + ", width: " + $('.brick').width());}, 500);