JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<h1>Headline Level 1</h1>
<h2>Headline Level 2</h2>
<h3>Headline Level 3</h3>
<h4>Headline Level 4</h4>
<h5>Headline Level 5</h5>
<h6>Headline Level 6</h6>
<p class="l">Paragraph Large</p>
<p>Paragraph Large</p>
<p class="s">Paragraph Large</p>

SCSS

$scale_start: 600px;
$scale_end: 1200px;

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {
      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }
      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}


h1 {
  @include fluid-type($scale_start, $scale_end, 1.75, 4.125);
}

JavaScript

var settings = {
	baseFontSize : 1,
  unit : 'rems',
  scale : [
  	{ name: 'xs', 	min: 0.75, 	max: 0.75 	}, // p-
    { name: 's', 		min: 0.825, max: 0.825 	}, // h6
    { name: 'm', 		min: 1, 		max: 1 			}, // h5, p
    { name: 'l', 		min: 1.125, max: 1.5 		}, // h4, p+
    { name: 'xl', 	min: 1.25, 	max: 2 			}, // h3
    { name: 'xxl', 	min: 1.5, 	max: 3 			}, // h2
    { name: 'xxxl', min: 1.75, 	max: 4.125 	}, // h1
  ],
}

function generateTypeScale() {

}