JSFiddle - React, Tailwind, and code Playground

by Slava

HTML

Base
<div data-theme="C-TAP">
 <div style="font-size:var(--font-size-small)">
  Medium
 </div> 
 <div style="font-size:var(--font-size-large)">
  Large
 </div> 
</div>

<div data-theme="DE">
 <div style="font-size:var(--font-size-small)">
  Medium
 </div> 
 <div style="font-size:var(--font-size-large)">
  Large <br>
  -------------------------------------------------------------------------------------------------
 </div> 
</div>

CSS

[data-theme="C-TAP"] {
  /* number */
  --font-size-small: 2.5rem;
  --font-size-medium: 3.125rem;
  --font-size-large: 4rem;
  --font-size-hero: 4.375rem;
  --font-size-xlarge: 5rem;
}
[data-theme="DE"] {
  /* number */
  --font-size-small: 3.5rem;
  --font-size-medium: 4.125rem;
  --font-size-large: 5rem;
  --font-size-hero: 5.375rem;
  --font-size-xlarge: 6rem;
}

html{
  --font-size-rem-base: calc(100vw / 720 * 16); /* 720 = base screen width in Figma. 16 = default value for rem unit base in Figma */
  font-size: var(--font-size-rem-base);
}