JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <h1 class="hero">Font size</h1>
</div>

CSS

.wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; }
.hero {
    min-height: 0vw;
    font-size: clamp(16px, 10vw, 32px);
}