JSFiddle - React, Tailwind, and code Playground

by jwerre

HTML

<p>
Vestibulum nec urna nec mi venenatis tristique. Integer vulputate ac ligula sed dictum. Integer congue neque mi, sit amet egestas turpis tempor id. Donec fringilla malesuada elementum. Vivamus tempor dapibus pellentesque. Nunc posuere mauris ultrices, porttitor nibh faucibus, varius nisi. Nulla sit amet diam sollicitudin, luctus diam ut, egestas quam. Morbi diam massa, finibus eget ante vitae, malesuada rhoncus est. Suspendisse et ex nec diam ornare ultricies. Proin eu sem pulvinar, rhoncus orci in, consequat ipsum. Nullam sed arcu eu tortor bibendum fermentum ac non magna.
</p>

SCSS

$font-size--10: 0.625rem; /* 10px */
$font-size--12: 0.75rem; /* 12px */
$font-size--14: 0.875rem; /* 14px (base) */
$font-size--default: $font-size--14;
$font-size--16: 1rem; /* 16px */
$font-size--18: 1.125rem; /* 18px */
$font-size--20: 1.25rem; /* 20px */
$font-size--24: 1.5rem; /* 24px */
$font-size--28: 1.75rem; /* 28px */
$font-size--32: 2rem; /* 32px */
$font-size--36: 2.25rem; /* 36px */

$font-family--serif: 'Suisse Works', 'Times New Roman', Times, serif;
$font-family--sans: 'Suisse Intl', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family--default: $font-family--sans;
$font-family--mono: 'Suisse Mono', 'Courier New', Courier, monospace;

$font--xsmall: normal normal $font-size--10/130% $font-family--default;
$font--xsmall-bold: normal bold $font-size--10/130% $font-family--default;
$font--small: normal normal $font-size--12/130% $font-family--default;
$font--default: normal normal $font-size--default/140% $font-family--default;
$font--medium: $font--default;
$font--default-bold: normal bold $font-size--default/140% $font-family--default;
$font--medium-bold: $font--default-bold;
$font--large: normal normal $font-size--16/140% $font-family--default;

p {
	color: red;
	font: $font--xsmall;
}