Class | Properties |
---|---|
.text-xs | font-size: 12px; |
.text-sm | font-size: 14px; |
.text-base | font-size: 16px; |
.text-lg | font-size: 18px; |
.text-xl | font-size: 20px; |
.text-2xl | font-size: 24px; |
.text-3xl | font-size: 30px; |
.text-4xl | font-size: 36px; |
.text-5xl | font-size: 48px; |
.text-6xl | font-size: 64px; |
.text-7xl | font-size: 80px; |
These utility classes are good for more fine tuned adjustments of font size.
<p class="text-xs">Text size xs</p>
<p class="text-sm">Text size sm</p>
<p class="text-base">Text size base</p>
<p class="text-lg">Text size lg</p>
<p class="text-xl">Text size xl</p>
<p class="text-2xl">Text size 2xl</p>
<p class="text-3xl">Text size 3xl</p>
<p class="text-4xl">Text size 4xl</p>
<p class="text-5xl">Text size 5xl</p>
<p class="text-6xl">Text size 6xl</p>
<p class="text-7xl">Text size 7xl</p>
Text size xs
Text size sm
Text size base
Text size lg
Text size xl
Text size 2xl
Text size 3xl
Text size 4xl
Text size 5xl
Text size 6xl
Text size 7xl
Input
<span class="text-xs">Text size xs</span>
<span class="text-sm">Text size sm</span>
<span class="text-base">Text size base</span>
<span class="text-lg">Text size lg</span>
<span class="text-xl">Text size xl</span>
<span class="text-2xl">Text size 2xl</span>
<span class="text-3xl">Text size 3xl</span>
<span class="text-4xl">Text size 4xl</span>
<span class="text-5xl">Text size 5xl</span>
<span class="text-6xl">Text size 6xl</span>
<span class="text-7xl">Text size 7xl</span>
Output
<span class="text-xs" style="font-size: 12px; line-height: 14.4px;">Text size xs</span>
<span class="text-sm" style="font-size: 14px; line-height: 16.8px;">Text size sm</span>
<span class="text-base" style="font-size: 16px; line-height: 19.2px;">Text size base</span>
<span class="text-lg" style="font-size: 18px; line-height: 21.6px;">Text size lg</span>
<span class="text-xl" style="font-size: 20px; line-height: 24px;">Text size xl</span>
<span class="text-2xl" style="font-size: 24px; line-height: 28.8px;">Text size 2xl</span>
<span class="text-3xl" style="font-size: 30px; line-height: 36px;">Text size 3xl</span>
<span class="text-4xl" style="font-size: 36px; line-height: 43.2px;">Text size 4xl</span>
<span class="text-5xl" style="font-size: 48px; line-height: 57.6px;">Text size 5xl</span>
<span class="text-6xl" style="font-size: 64px; line-height: 76.8px;">Text size 6xl</span>
<span class="text-7xl" style="font-size: 80px; line-height: 96px;">Text size 7xl</span>