min()

text-[min(6vw,100px)] provides responsive control over text sizes, allowing the font size to adjust based on the viewport width or different screen sizes.

The min() CSS function used within this utility selects the smallest value between 6vw (6% of the viewport width) and 100px. It never exceeds 100px, ideal for responsive headings.

<h1 className="text-[min(6vw,100px)]">
  Responsive Heading
</h1>
 
<p>
  The size of this heading scales dynamically between 6% of the viewport width and 100px.
</p>

clamp()

Alternatively, clamp() is a new CSS property specifically for responsive typography.

<h1 className="text-[clamp(2rem,6vw,5rem)]">
  Responsive Heading
</h1>

clamp() has 3 arguments:

• first one is the minimum allowed font-size.
• third one is the maximum allowed font-size.
• second argument is the font-size to always have. Its unit must be relative (vw, vh, ch) and not absolute (i.e not px, mm, pt).