JSFiddle - React, Tailwind, and code Playground

by Chih-Hsuan Fan

HTML

<div class="wrap">
  <p class="f6">6px</p>
  <p class="f7">7px</p>
  <p class="f8">8px</p>
  <p class="f9">9px</p>
  <p class="f10">10px</p>
  <p class="f11">11px</p>
  <p class="f12">12px</p>
  <p class="f13">13px</p>
  <p class="f14">14px</p>
</div>
<div class="wrap">
  <div class="box b6"></div>
  <div class="box b7"></div>
  <div class="box b8"></div>
  <div class="box b9"></div>
  <div class="box b10"></div>
  <div class="box b11"></div>
  <div class="box b12"></div>
  <div class="box b13"></div>
  <div class="box b14"></div>
</div>

SASS

$sizes: 6, 7, 8, 9, 10, 11, 12, 13, 14
$rem-base: 10

html
  /* font-size: 62.5% */
  font-size: 10px

.wrap
  width: 60px
  float: left

@each $size in $sizes
  $val: ($size / $rem-base) * 1rem
  
  .f#{$size}
    font-size: $val
  
  .b#{$size}
    width: $val
    height: $val
    
.box
  margin-top: 1em
  margin-bottom: 1em
  background-color: blue