Controlling text size is one of the most common things you'll do in Tailwind. The text-{size} utilities give you access to a pre-defined typographic scale that keeps your typography consistent across your entire project.
Available sizes
Tailwind provides text size utilities from text-xs to text-9xl, each mapping to a specific font size and line height.
<p class="text-xs">Extra small — 12px</p>
<p class="text-sm">Small — 14px</p>
<p class="text-base">Base — 16px (default)</p>
<p class="text-lg">Large — 18px</p>
<p class="text-xl">Extra large — 20px</p>
<p class="text-2xl">2XL — 24px</p>
<p class="text-3xl">3XL — 30px</p>
<p class="text-4xl">4XL — 36px</p>
<p class="text-5xl">5XL — 48px</p>
<p class="text-6xl">6XL — 60px</p>
<p class="text-7xl">7XL — 72px</p>
<p class="text-8xl">8XL — 96px</p>
<p class="text-9xl">9XL — 128px</p>
Responsive text sizing
Combine text sizes with responsive prefixes to adjust typography at different breakpoints. This is how you make headings smaller on mobile and larger on desktop.
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
Responsive Heading
</h1>
Fine-tuning with arbitrary values
If the default scale doesn't have exactly what you need, use arbitrary values in square brackets.
<p class="text-[13px]">Custom 13px text</p>
<p class="text-[2.5rem]">Custom rem value</p>