| title | description | navigation | github | prev | next | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Typography for React - Material Tailwind |
Customise your web projects with our beautiful typography component for Tailwind CSS and React using Material Design guidelines. |
|
typography |
tooltip |
footer |
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.
<CodePreview link="typography#paragraph" component={<TypographyExamples.TypographyDefault />}>
import { Typography } from "@material-tailwind/react";
export function TypographyDefault() {
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>
);
}## Typography Variants
The Typography component comes with 9 different variants that you can change it using the variant prop.
<CodePreview link="typography#typography" component={<TypographyExamples.TypographyVariants />}>
import { Typography } from "@material-tailwind/react";
export function TypographyVariants() {
return (
<>
<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>
</>
);
}## Typography Colors
The Typography component comes with 23 different colors that you can change it using the color prop.
<CodePreview link="typography#typography-colors" component={<TypographyExamples.TypographyColors />}>
import { Typography } from "@material-tailwind/react";
export function TypographyColors() {
return (
<>
<Typography variant="h1" color="blue-gray">
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>
</>
);
}## Typography Gradient Colors
You can change the Typography text color into a gradient color using the textGradient prop.
<CodePreview link="typography#typography-gradient-color" component={<TypographyExamples.TypographyGradientColor />}>
import { Typography } from "@material-tailwind/react";
export function TypographyGradientColor() {
return (
<Typography variant="h1" color="blue" textGradient>
Material Tailwind
</Typography>
);
}# Typography Props
The following props are available for typography component. These are the custom props that 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 it's a required prop. |
import type { TypographyProps } from "@material-tailwind/react";## Types - Variant
type variant =
| "h1"
| "h2"
| "h3"
| "h4"
| "h5"
| "h6"
| "lead"
| "paragraph"
| "small";## Types - Color
type color =
| "inherit"
| "current"
| "black"
| "white"
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";# Typography Theme
Learn how to customize the theme and styles for typography component, the theme object for typography component has three main objects:
A. The defaultProps object for setting up the default value for props of typography component.
B. The valid object for customizing the valid values for typography component props.
C. The styles object for customizing the theme and styles of typography component.
You can customize the theme and styles of typography component by adding Tailwind CSS classes as key paired values for objects.
## Typography Theme Object Type
interface TypographyStylesType {
defaultProps: {
variant: string;
color: string;
as: string;
textGradient: boolean;
className: string;
};
valid: {
variants: string[];
colors: string[];
};
styles: {
variants: {
h1: object;
h2: object;
h3: object;
h4: object;
h5: object;
h6: object;
lead: object;
paragraph: object;
small: object;
};
textGradient: object;
colors: object;
};
}import type { TypographyStylesType } from "@material-tailwind/react";## Typography Theme Customization
const theme = {
typography: {
defaultProps: {
variant: "paragraph",
color: "inherit",
textGradient: false,
className: "",
},
valid: {
variants: [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"lead",
"paragraph",
"small",
],
colors: [
"inherit",
"current",
"black",
"white",
"blue-gray",
"gray",
"brown",
"deep-orange",
"orange",
"amber",
"yellow",
"lime",
"light-green",
"green",
"teal",
"cyan",
"light-blue",
"blue",
"indigo",
"deep-purple",
"purple",
"pink",
"red",
],
},
styles: {
variants: {
h1: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-5xl",
fontWeight: "font-semibold",
lineHeight: "leading-tight",
},
h2: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-4xl",
fontWeight: "font-semibold",
lineHeight: "leading-[1.3]",
},
h3: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-3xl",
fontWeight: "font-semibold",
lineHeight: "leading-snug",
},
h4: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-2xl",
fontWeight: "font-semibold",
lineHeight: "leading-snug",
},
h5: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-xl",
fontWeight: "font-semibold",
lineHeight: "leading-snug",
},
h6: {
display: "block",
fontSmoothing: "antialiased",
letterSpacing: "tracking-normal",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-semibold",
lineHeight: "leading-relaxed",
},
lead: {
display: "block",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-xl",
fontWeight: "font-normal",
lineHeight: "leading-relaxed",
},
paragraph: {
display: "block",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-light",
lineHeight: "leading-relaxed",
},
small: {
display: "block",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-sm",
fontWeight: "font-light",
lineHeight: "leading-normal",
},
},
textGradient: {
bgClip: "bg-clip-text",
color: "text-transparent",
},
colors: {
inherit: {
color: "text-inherit",
},
current: {
color: "text-current",
},
black: {
color: "text-black",
},
white: {
color: "text-white",
},
"blue-gray": {
color: "text-blue-gray-900",
gradient: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
},
gray: {
color: "text-gray-700",
gradient: "bg-gradient-to-tr from-gray-600 to-gray-400",
},
brown: {
color: "text-brown-500",
gradient: "bg-gradient-to-tr from-brown-600 to-brown-400",
},
"deep-orange": {
color: "text-deep-orange-500",
gradient: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
},
orange: {
color: "text-orange-500",
gradient: "bg-gradient-to-tr from-orange-600 to-orange-400",
},
amber: {
color: "text-amber-500",
gradient: "bg-gradient-to-tr from-amber-600 to-amber-400",
},
yellow: {
color: "text-yellow-500",
gradient: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
},
lime: {
color: "text-lime-500",
gradient: "bg-gradient-to-tr from-lime-600 to-lime-400",
},
"light-green": {
color: "text-light-green-500",
gradient: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
},
green: {
color: "text-green-500",
gradient: "bg-gradient-to-tr from-green-600 to-green-400",
},
teal: {
color: "text-teal-500",
gradient: "bg-gradient-to-tr from-teal-600 to-teal-400",
},
cyan: {
color: "text-cyan-500",
gradient: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
},
"light-blue": {
color: "text-light-blue-500",
gradient: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
},
blue: {
color: "text-blue-500",
gradient: "bg-gradient-to-tr from-blue-600 to-blue-400",
},
indigo: {
color: "text-indigo-500",
gradient: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
},
"deep-purple": {
color: "text-deep-purple-500",
gradient: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
},
purple: {
color: "text-purple-500",
gradient: "bg-gradient-to-tr from-purple-600 to-purple-400",
},
pink: {
color: "text-pink-500",
gradient: "bg-gradient-to-tr from-pink-600 to-pink-400",
},
red: {
color: "text-red-500",
gradient: "bg-gradient-to-tr from-red-600 to-red-400",
},
},
},
},
};