Tailwind CSS Typography - React

Use our React and Tailwind CSS Typography to present your website/web app as clearly and efficiently as possible.

Below we are presenting Typography component examples. It comes in different styles and colors, so you can adapt it easily to your needs.

Headings

Headings are used to define the structure of the content. They are used to create a hierarchy of information on the page. The Typography component provides six different heading sizes, from h1 to h6 that you can use in your project.

Material Tailwind (H1)

Material Tailwind (H2)
Material Tailwind (H3)

Material Tailwind (H4)

Material Tailwind (H5)
Material Tailwind (H6)
"use client";

import { Typography } from "@material-tailwind/react";

export function Headings() {
  return (
    <div className="flex flex-col gap-4">
      <Typography type="h1">Material Tailwind (H1)</Typography>
      <Typography as="div" type="h2">
        Material Tailwind (H2)
      </Typography>
      <Typography as="div" type="h3">
        Material Tailwind (H3)
      </Typography>
      <Typography type="h4">Material Tailwind (H4)</Typography>
      <Typography type="h5">Material Tailwind (H5)</Typography>
      <Typography type="h6">Material Tailwind (H6)</Typography>
    </div>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function Headings() {
  return (
    <div className="flex flex-col gap-4">
      <Typography type="h1">Material Tailwind (H1)</Typography>
      <Typography as="div" type="h2">
        Material Tailwind (H2)
      </Typography>
      <Typography as="div" type="h3">
        Material Tailwind (H3)
      </Typography>
      <Typography type="h4">Material Tailwind (H4)</Typography>
      <Typography type="h5">Material Tailwind (H5)</Typography>
      <Typography type="h6">Material Tailwind (H6)</Typography>
    </div>
  );
}

Paragraph

The paragraph is used to display text content. It is the most common component used to display text content on a web page. The Typography component by default is a paragraph, so you can use it to display text content.

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.

"use client";

import { Typography } from "@material-tailwind/react";

export function Paragraph() {
  return (
    <Typography>
      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.
    </Typography>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function Paragraph() {
  return (
    <Typography>
      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.
    </Typography>
  );
}

Lead Paragraph

The lead paragraph is used to highlight the most important information on the page. It is used to grab the user's attention and make them read the rest of the content. The Typography component provides a lead type that you can use to display the lead paragraph.

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.

"use client";

import { Typography } from "@material-tailwind/react";

export function LeadParagraph() {
  return (
    <Typography type="lead">
      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.
    </Typography>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function LeadParagraph() {
  return (
    <Typography type="lead">
      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.
    </Typography>
  );
}

Small Text

The small text is used to display small text content on the page. It is used to display additional information or to provide context to the user. The Typography component provides a small type that you can use to display small text content.

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.
"use client";

import { Typography } from "@material-tailwind/react";

export function SmallText() {
  return (
    <Typography type="small">
      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.
    </Typography>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function SmallText() {
  return (
    <Typography type="small">
      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.
    </Typography>
  );
}

Typography Colors

We provide different colors for Typography component like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the Typography component color.

In the example below, we've showcased the different colors that you can use for Typography component in your project.

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

Material Tailwind

"use client";

import { Typography } from "@material-tailwind/react";

export function TypographyColors() {
  return (
    <div className="flex flex-col gap-4">
      <Typography type="h1" color="primary">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="secondary">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="info">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="success">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="warning">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="error">
        Material Tailwind
      </Typography>
    </div>
  );
}
"use client";

import { Typography } from "@material-tailwind/react";

export function TypographyColors() {
  return (
    <div className="flex flex-col gap-4">
      <Typography type="h1" color="primary">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="secondary">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="info">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="success">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="warning">
        Material Tailwind
      </Typography>
      <Typography type="h1" color="error">
        Material Tailwind
      </Typography>
    </div>
  );
}