In this tutorial we will see tailwind css headings typography h1, h2, h3, h4, h5, h6, responsive headings typography example with Tailwind CSS.
Example 1
Tailwind CSS Simple Headings Typography.
<h1 class="text-5xl text-gray-800">h1. Tailwind CSS heading</h1>
<h2 class="text-4xl text-gray-800">h2. Tailwind CSS heading</h2>
<h3 class="text-3xl text-gray-800">h3. Tailwind CSS heading</h3>
<h4 class="text-2xl text-gray-800">h4. Tailwind CSS heading</h4>
<h5 class="text-xl text-gray-800">h5. Tailwind CSS heading</h5>
<h6 class="text-lg text-gray-800">h6. Tailwind CSS heading</h6>
Example 2
Tailwind CSS Responsive Headings Typography.
<h1 class="text-3xl text-gray-800 md:text-4xl lg:text-5xl">
h1. Tailwind CSS heading
</h1>
<h2 class="text-2xl text-gray-800 lg:text-4xl md:text-3xl">
h2. Tailwind CSS heading
</h2>
<h3 class="text-xl text-gray-800 md:text-2xl lg:text-3xl">
h3. Tailwind CSS heading
</h3>
<h4 class="text-lg text-gray-800 md:text-xl lg:text-2xl">
h4. Tailwind CSS heading
</h4>
<h5 class="text-base text-gray-800 md:text-lg lg:text-lg">
h5. Tailwind CSS heading
</h5>
<h6 class="text-sm text-gray-800 lg:text-lg md:text-base">
h6. Tailwind CSS heading
</h6>