Skip to content

Instantly share code, notes, and snippets.

@terryupton

terryupton/Tailwind Clamp and Text Size using Arbitary values or CSS.html

Created April 15, 2025 17:03
Show Gist options
  • Save terryupton/fb9acad6b12e64f818e5fd63b99e3406 to your computer and use it in GitHub Desktop.
Save terryupton/fb9acad6b12e64f818e5fd63b99e3406 to your computer and use it in GitHub Desktop.
Download ZIP
How to use clamp for text/font sizes usaing Tailwind arbitary values and CSS eqivilents
Raw
Tailwind Clamp and Text Size using Arbitary values or CSS.html
<h1 class="text-[clamp(var(--text-4xl),_12vw,_var(--text-8xl))]">
Heading
</h1>
<h1 class="text-[clamp(var(--text-3xl),_10vw,_var(--text-6xl))]">
Heading
</h1>
<!-- CSS eqivilent
.text-hero {
font-size: clamp(var(--text-4xl), 12vw, var(--text-8xl));
}
.text-hero--smaller {
font-size: clamp(var(--text-3xl), 10vw, var(--text-6xl));
}
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment