Typography
Learn font sizes, weights, alignment, line height and text colors.
Learning approach
Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.
Tailwind Example
HTML + Tailwind CSS
<div class="p-6">
<h1 class="text-4xl font-extrabold text-slate-900">
Modern Heading
</h1>
<p class="mt-3 text-base leading-7 text-slate-600">
Tailwind makes typography easy to control.
</p>
</div>
Live Preview
Your Tailwind design will appear here.
Click Run Preview
See the lesson example here.
Test your understanding
Choose the best answer.
Which Tailwind utility creates a flex container?