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.

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-base antialiased font-light leading-relaxed text-inherit">
      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>

Headings

Material Tailwind

<div class="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
  <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-inherit">
    Material Tailwind
  </h1>
  <h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-inherit">
    Material Tailwind
  </h2>
  <h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-inherit">
    Material Tailwind
  </h3>
  <h4 class="block font-sans text-2xl antialiased font-semibold leading-snug tracking-normal text-inherit">
    Material Tailwind
  </h4>
  <h5 class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-inherit">
    Material Tailwind
  </h5>
  <h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
    Material Tailwind
  </h6>
 
</div>

Lead Text

  <p class="block font-sans text-xl antialiased font-normal leading-relaxed text-inherit">
    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 antialiased font-light leading-relaxed text-inherit">
    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 antialiased font-light leading-normal text-inherit">
    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 antialiased font-semibold leading-tight tracking-normal text-blue-gray-900">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-blue-500">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-red-500">
    Material Tailwind
  </h1>
  <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-green-500">
    Material Tailwind
  </h1>
</div>

Typography Gradient Color

Material Tailwind

  <h1 class="block font-sans text-5xl antialiased font-semibold leading-tight tracking-normal text-transparent bg-gradient-to-tr from-blue-600 to-blue-400 bg-clip-text">
      Material Tailwind
    </h1>