Font & Text in Tailwind CSS
From the Tailwind CSS cheat sheet · Typography · verified Jul 2026
Font & Text
Control font size, weight, line height, and text styling.
html
<!-- Font size -->
<p class="text-sm">Small</p>
<p class="text-base">Base (1rem)</p>
<p class="text-xl">Extra large</p>
<p class="text-4xl font-bold">Heading</p>
<!-- Text color & decoration -->
<p class="text-gray-600">Gray text</p>
<a class="underline decoration-blue-500">Link</a>
<p class="line-through">Deleted</p>💡 line-clamp-2 truncates text to 2 lines with an ellipsis — no CSS hacks needed
⚡ decoration-2 + underline-offset-4 creates modern-looking styled underlines
📌 text-shadow is new in v4 — supports color and opacity modifiers like text-shadow-lg/50
🟢 Use tracking-tight on large headings and tracking-wide on small uppercase labels
typographyfonttext
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.