Tailwind Fluid

/* Fluid Typography Config
   min-width: 402px;
   max-width: 1512px;
   base-min: 16;
   ratio-min: 1.067;
   base-max: 18;
   ratio-max: 1.250;
   preview-text: This%20is%20a%20sample%20text.;
*/
@layer utilities {
  .text-6xl {
    /* min: 25.192px, max: 85.831px */
    font-size: clamp(1.5745rem, 0.2019rem + 5.463vw, 5.3644rem);
  }

  .text-5xl {
    /* min: 23.611px, max: 68.665px */
    font-size: clamp(1.4757rem, 0.4559rem + 4.0589vw, 4.2916rem);
  }

  .text-4xl {
    /* min: 22.128px, max: 54.932px */
    font-size: clamp(1.383rem, 0.6405rem + 2.9553vw, 3.4333rem);
  }

  .text-3xl {
    /* min: 20.739px, max: 43.945px */
    font-size: clamp(1.2962rem, 0.7709rem + 2.0906vw, 2.7466rem);
  }

  .text-2xl {
    /* min: 19.436px, max: 35.156px */
    font-size: clamp(1.2147rem, 0.8589rem + 1.4162vw, 2.1972rem);
  }

  .text-xl {
    /* min: 18.216px, max: 28.125px */
    font-size: clamp(1.1385rem, 0.9142rem + 0.8927vw, 1.7578rem);
  }

  .text-lg {
    /* min: 17.072px, max: 22.5px */
    font-size: clamp(1.067rem, 0.9441rem + 0.489vw, 1.4063rem);
  }

  .text-base {
    /* min: 16px, max: 18px */
    font-size: clamp(1rem, 0.9547rem + 0.1802vw, 1.125rem);
  }

  .text-sm {
    /* min: 14.995px, max: 14.4px */
    font-size: clamp(0.9372rem, 0.9507rem + -0.0536vw, 0.9rem);
  }

  .text-xs {
    /* min: 14.054px, max: 11.52px */
    font-size: clamp(0.8784rem, 0.9357rem + -0.2283vw, 0.72rem);
  }
}