MD3 typescale
Each row uses the matching text-<role>-<size>
utility. Computed metrics on the right are read live from
getComputedStyle.
Tailwind size scale → MD3 mapping
Tailwind defaults are re-mapped to the closest MD3 typescale role, so existing markup picks up Material-correct size + line-height + tracking without changes.
Sample usage
<!-- Named MD3 utilities -->
<h1 class="text-display-large">Hero headline</h1>
<h2 class="text-headline-medium">Section title</h2>
<p class="text-body-medium">Body copy</p>
<span class="text-label-small uppercase">Caption</span>
<!-- Tailwind defaults — already aligned to MD3 metrics -->
<p class="text-sm">14/20, tracking 0.25 (body-medium)</p>
<p class="text-base">16/24, tracking 0.5 (body-large)</p>
<p class="text-2xl">28/36 (headline-medium)</p>
<!-- Re-skin globally — swap one var on :root -->
<style>
:root { --md-sys-typescale-plain-font: 'Inter', system-ui, sans-serif; }
</style>