<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto px-2 h-screen flex items-center">
  <h1 class="heading-2 sm:heading-1">It will be smaller in mobile size</h1>
</div>
<style type="text/tailwindcss">
  @layer utilities {
  .heading-1 {
    @apply text-3xl font-bold;
  }

  .heading-2 {
    @apply text-2xl font-semibold;
  }

  /* Additional heading-3 ... heading-6 styles */
}
  </style>