JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<div class="no-unit">
    no-unit
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>

<div class="ems">
    ems
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>

<div class="rems">
    rems
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
</div>

SCSS

div {
    border: 1px solid #f00;
    float: left;
    margin: 20px;
    padding: 20px;
}

.no-unit {
    line-height: 1;
}

.ems {
    line-height: 1em;
}

.rems {
    line-height: 1rem;
}