JSFiddle - React, Tailwind, and code Playground

HTML

<input id="x1-size" name="radios" type="radio" checked>
<input id="x2-size" name="radios" type="radio">
<input id="x3-size" name="radios" type="radio">

<p class="text">
lorem ipsum
</p>

<label for="x1-size">one</label>
<label for="x2-size">two</label>
<label for="x3-size">three</label>

SCSS

html {
  font-size: 10px;
  &.x1-size {
    font-size: 10px;
  }
  &.x2-size {
    font-size: 12px;
  }
  &.x3-size {
    font-size: 14px;
  }
}
p {
  font-size: 1rem;
}

JavaScript

jQuery(function($) {
	$(document).on('change', 'input[name="radios"]', function() {
  	$('html')[0].className = $('html')[0].className.replace(/\b.*?-size\b/g, '');
  	$('html').addClass($(this).attr('id'));
  });
});