Tailwind CSS Typography

Create website or app projects easier with our amazing typography component!

Our typography component includes elements like headings, paragraphs, text, and colors that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.

Check out below our examples of typography elements styled with Tailwind CSS.

Typography Examples:

Default Paragraph

Use this simple paragraph example for any type of web page.

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

Organize and structure text to improve readability and accessibility with Material Tailwind's 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

Highlight the key message or value proposition of a page or section with our lead text example.

  <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

See below how you can implement a paragraph with Material Tailwind.

  <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

Use this example of small text for disclaimers, footnotes, labels, and as secondary information.

  <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

Implement different colors for your typography depending on the message you want to transmit.

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

You can implement gradient colors for your typography. See below how you can do this with Material Tailwind.

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>