JSFiddle - React, Tailwind, and code Playground

by spoike

HTML

<div class="foo" style="--size: 24px">
This will be in <b>24 px</b>
</div>
<div class="foo" style="--fat: chocolate">
This will be in <b>12 px and chocolate colored</b>
</div>

CSS

.foo {
  --size: 12px;
  font-size: var(--size);
  line-height: calc(2 * var(--size));
}

.foo b {
  color: var(--fat);
}