3 min read
•Question 11 of 38easyHow to handle Typography in Tailwind?
Font size, weight, and text utilities.
What You'll Learn
- Font size classes
- Font weight and style
- Text alignment and decoration
Font Sizes
index.htmlHTML
<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-xl">XL (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>Font Weight
index.htmlHTML
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>Text Utilities
index.htmlHTML
<p class="text-center">Centered</p>
<p class="uppercase tracking-wide">Uppercase with spacing</p>
<p class="truncate">Truncates with ellipsis...</p>
<p class="line-clamp-2">Limits to 2 lines...</p>