Tailwind CSS Typography

Customise your web projects with our amazing Tailwind CSS headings!

The headings are titles or subtitles that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.

Below we are presenting 6 levels of headings that you can use in your Tailwind CSS project. The examples come in different colors so you can adapt them easily to your needs.

Headings

Material Tailwind

<div class="flex flex-col gap-8 text-left">
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-inherit antialiased">
    Material Tailwind
  </h1>
  <h2 class="block font-sans text-4xl font-semibold leading-[1.3] tracking-normal text-inherit antialiased">
    Material Tailwind
  </h2>
  <h3 class="block font-sans text-3xl font-semibold leading-snug tracking-normal text-inherit antialiased">
    Material Tailwind
  </h3>
  <h4 class="block font-sans text-2xl font-semibold leading-snug tracking-normal text-inherit antialiased">
    Material Tailwind
  </h4>
  <h5 class="block font-sans text-xl font-semibold leading-snug tracking-normal text-inherit antialiased">
    Material Tailwind
  </h5>
  <h6 class="block font-sans text-base font-semibold capitalize leading-relaxed tracking-normal text-inherit antialiased">
    Material Tailwind
  </h6>
</div>

Lead Text

Material Tailwind is an easy to use components library for Tailwind CSS and Material Design. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.

<p class="block font-sans text-xl font-normal leading-relaxed text-inherit antialiased">
  Material Tailwind is an easy to use components library for Tailwind CSS and
  Material Design. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Paragraph

<p class="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
  Material Tailwind is an easy to use components library for Tailwind CSS and
  Material Design. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Small Text

<p class="block font-sans text-sm font-light leading-normal text-inherit antialiased">
  Material Tailwind is an easy to use components library for Tailwind CSS and
  Material Design. It provides a simple way to customize your components, you
  can change the colors, fonts, breakpoints and everything you need.
</p>

Typography Colors

Material Tailwind

<div class="flex flex-col gap-8 text-left">
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-blue-gray-900 antialiased">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-blue-500 antialiased">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-red-500 antialiased">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl font-semibold leading-tight tracking-normal text-green-500 antialiased">
    Material Tailwind
  </h1>
</div>

Typography Gradient Color

Material Tailwind

tooltip

Edit this page on Github