Font Size
Control text size with the text-xs to text-9xl scale.
Syntax
class="text-xl"Font-size utilities run from text-xs up to text-9xl. Each step also sets a sensible line-height.
text-sm— small.text-base— default 16px.text-2xl— large heading.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer scales a hero headline to text-6xl on desktop and trims it to text-3xl on mobile using responsive prefixes.
- A data table uses text-sm for cell content to fit more information in each row without truncation.
- A footnote disclaimer is styled with text-xs to de-emphasize it visually relative to surrounding body copy.
More examples
Type scale demonstration
Tailwind's text-* scale progresses from xs to 9xl, each mapping to a fixed rem value that remains consistent across the project.
<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-2xl font-bold">2XL heading (1.5rem)</p>Responsive hero heading
The heading grows through three size steps as the viewport widens, keeping it legible on phones without overwhelming small screens.
<h1 class="text-3xl md:text-5xl lg:text-7xl font-extrabold text-gray-900">
Build Fast, Ship Faster
</h1>Small label and large value
Pairing text-sm for the label with text-4xl for the value creates a clear visual hierarchy on a KPI metric card.
<div class="text-center">
<p class="text-sm text-gray-500 uppercase tracking-wide">Monthly Revenue</p>
<p class="text-4xl font-bold text-gray-900">$48,230</p>
</div>
Discussion