JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p1">xx-small</p>
<p class="p2">x-small</p>
<p class="p3">small</p>
<p class="p4">medium</p>
<p class="p5">large</p>
<p class="p6">x-large</p>
<p class="p7">xx-large</p>

CSS

.pl {
    font-size: xx-small;
}
.p2 {
    font-size: x-small;
}
.p3 {
    font-size: small;
}
.p4 {
    font-size: medium;
}
.p5 {
    font-size: large;
}
.p6 {
    font-size: x-large;
}
.p7 {
    font-size: xx-large;
}