JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

SCSS

@function type-scale($max, $ratio, $accuracy: 1000) {
    $m: $max / ($max * 0 + 1);
    $u: $max / $m;
    @return $u * math.round(math.pow($m, $ratio) * $accuracy) / $accuracy;
}

h1 {
  font-size: type-scale(3rem, 5/5);
}