Use our Tailwind CSS typography to present your website/web app as clearly and efficiently as possible.
Below we are presenting a simple typography component example. It comes in different styles and colors, so you can adapt it 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.
import { Typography } from "@material-tailwind/react";
export default function Example() {
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>
);
}
The typography component comes with 9 different variants that you can change it using the variant
prop.
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.
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.
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.
import { Typography } from "@material-tailwind/react";
export default function Variants() {
return (
<Fragment>
<Typography variant="h1">Material Tailwind</Typography>
<Typography variant="h2">Material Tailwind</Typography>
<Typography variant="h3">Material Tailwind</Typography>
<Typography variant="h4">Material Tailwind</Typography>
<Typography variant="h5">Material Tailwind</Typography>
<Typography variant="h6">Material Tailwind</Typography>
<Typography variant="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>
<Typography variant="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.
</Typography>
<Typography variant="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>
</Fragment>
);
}
The alert component comes with 23 different colors that you can change it using the color
prop, below there are some examples of the colors but you can check all of the them here.
import { Typography } from "@material-tailwind/react";
export default function Colors() {
return (
<Fragment>
<Typography variant="h1" color="blue-grey">
Material Tailwind
</Typography>
<Typography variant="h1" color="blue">
Material Tailwind
</Typography>
<Typography variant="h1" color="red">
Material Tailwind
</Typography>
<Typography variant="h1" color="green">
Material Tailwind
</Typography>
</Fragment>
);
}
You can change the typography text color into a gradient color using the textGradient
prop.
import { Typography } from "@material-tailwind/react";
export default function GradientColor() {
return (
<Typography variant="h1" color="blue" textGradient>
Material Tailwind
</Typography>
);
}
The following props are available for the typography component. These are the custom props that come with we've added for the typography component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
variant | Variant | Change typography variant | paragraph |
color | Color | Change typography color | inherit |
textGradient | boolean | Change typography color into a gradient color | false |
as | element | Change the typography rendered element | undefined |
className | string | Add custom className for typography | '' |
children | node | Add content for typography | No default value its a required prop. |
type variant =
| "h1"
| "h2"
| "h3"
| "h4"
| "h5"
| "h6"
| "lead"
| "paragraph"
| "small";
type color =
| "inherit"
| "current"
| "black"
| "white"
| "blue-grey"
| "grey"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";