Configuring Tailwind File

tailwind.config.js:
theme: {
    extend: {
      fontSize: {
        // Small breakpoints
        'h1-sm': '2rem',  // Example: 32px
        'h2-sm': '1.5rem', // Example: 24px
        'p-sm': '1rem',    // Example: 16px

        // Desktop breakpoints
        'h1-md': '3rem',  // Example: 48px
        'h2-md': '2rem',  // Example: 32px
        'p-md': '1.25rem', // Example: 20px
      },
    },
  },

main.css file:
@import "tailwindcss/base";

/* Custom utility classes for small breakpoints */
.h1-sm {
  @apply text-h1-sm;
}

.h2-sm {
  @apply text-h2-sm;
}

.p-sm {
  @apply text-p-sm;
}

/* Custom utility classes for desktop breakpoints */
@media (min-width: 768px) {
  .h1-md {
    @apply text-h1-md;
  }

  .h2-md {
    @apply text-h2-md;
  }

  .p-md {
    @apply text-p-md;
  }
}