Skip to content

Latest commit

 

History

History
200 lines (166 loc) · 5.91 KB

typography.mdx

File metadata and controls

200 lines (166 loc) · 5.91 KB
Raw
title description navigation github prev next
Tailwind CSS Typography - Material Tailwind
Customise your web projects with our easy-to-use Typography component for Tailwind CSS using Material Design guidelines.
default-paragraph
headings
lead-text
paragraph
small-text
typography-colors
typography-gradient-color
typography
tooltip
footer

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.

<CodePreview id="typography" link="typography#typography" className="mt-2" component={<HTMLTypographyExamples.TypographyDefault/>}

    <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.

<CodePreview id="headings" link="typography#typography-variants" className="mt-4" component={<HTMLTypographyExamples.TypographyVariants/>}

<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.

<CodePreview id="lead-text" link="typography#typography-variants" className="mt-4" component={<HTMLTypographyExamples.TypographyLoadText/>}

  <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.

<CodePreview id="paragraph" link="typography#typography-variants" className="mt-4" component={<HTMLTypographyExamples.TypographyParagraph/>}

  <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.

<CodePreview id="small-text" link="typography#typography-variants" className="mt-4" component={<HTMLTypographyExamples.TypographySmallText/>}

  <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.

<CodePreview id="typography-colors" link="typography#typography-colors" className="mt-4" component={<HTMLTypographyExamples.TypographyColors/>}

<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.

<CodePreview id="typography-gradient-color" link="typography#typography-gradient-color" className="mt-4" component={<HTMLTypographyExamples.TypographyGradientColor/>}

  <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>