JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test-foo">This text should be 1rem.</div>
<div class="test-bar">This text should be 2rem.</div>
<div class="test-baz">This text should be 4rem.</div>

CSS

:root {
  --foo: 1rem;
  --bar: calc(var(--foo) * 2);
  --baz: calc(var(--bar) * 2);
}

.test-foo {
  font-size: var(--foo);
}

.test-bar {
  font-size: var(--bar);
}

.test-baz {
  font-size: var(--baz);
}