Tailwind CSS Headings Typography Examples

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>

tailwind Typography

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>

tailwind Typography 2