Typography

In places where you'd like to display long-text content such as articles or documentations, you can use our typography styles to style the content. Our typography styles extend the default typography styles of @tailwindcss/typography.

Installation

In order to use the typography styles, you need to install the official Tailwind CSS Typography plugin and create a custom typography styles file as shows below:

Install the typography plugin

Simple install the official Tailwind CSS Typography plugin with your favorite package manager:

bun

npm

yarn

bun add @tailwindcss/typography

Create custom typography styles

Now, create a typography.css file and add the following code:

.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    --tw-prose-body: var(--color-text-tertiary);
    --tw-prose-headings: var(--color-text-primary);
    --tw-prose-lead: var(--color-text-tertiary);
    --tw-prose-export const links = { var(--color-text-tertiary);
    --tw-prose-bold: var(--color-text-primary);
    --tw-prose-counters: var(--color-text-tertiary);
    --tw-prose-bullets: var(--color-text-tertiary);
    --tw-prose-hr: var(--color-border-secondary);
    --tw-prose-quotes: var(--color-text-primary);
    --tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
    --tw-prose-captions: var(--color-text-tertiary);
    /* --tw-prose-kbd: color.gray[900]; */
    /* --tw-prose-kbd-shadows: hexToRgb(color.gray[900]); */
    --tw-prose-code: var(--color-text-primary);
    --tw-prose-pre-code: var(--color-text-tertiary);
    --tw-prose-pre-bg: var(--color-bg-primary);
    --tw-prose-th-borders: var(--color-border-primary);
    --tw-prose-td-borders: var(--color-border-secondary);
 
    /* Base */
    color: var(--tw-prose-body);
    font-size: var(--text-md);
    line-height: var(--leading-md);
}
 
.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    /* Text */
    &:where(p) {
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
    }
 
    &:where([class~="lead"]) {
        font-size: var(--text-md);
        line-height: var(--leading-md);
        margin-top: 1.2em;
        margin-bottom: 1.2em;
    }
 
    /* Lists */
    &:where(ol) {
        liststyletype: decimal;
 
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: 23px;
    }
    &:where(ul) {
        liststyletype: disc;
 
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: 23px;
    }
    &:where(li) {
        margin-top: em(8; 16);
        margin-bottom: em(8; 16);
    }
    &:where(ol > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }
    &:where(ul > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }
 
    /* Horizontal rules */
    &:where(hr) {
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
 
    /* Quotes */
    &:where(blockquote) {
        color: var(--tw-prose-quotes);
 
        border-left-width: 2px;
        border-left-color: var(--tw-prose-quote-borders);
 
        padding-inline-start: 0;
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 10);
    }
    &:where(blockquote p) {
        margin: 0;
        font-weight: 500;
        font-style: italic;
 
        font-size: var(--text-xl);
        line-height: var(--leading-xl);
    }
    &:where(blockquote p:first-of-type::before) {
        content: open-quote;
    }
    &:where(blockquote p:last-of-type::after) {
        content: close-quote;
    }
 
    /* Headings */
    &:where(h1) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-display-sm);
        line-height: var(--leading-display-sm);
        margin-bottom: calc(var(--spacing) * 5);
        margin-top: calc(var(--spacing) * 10);
    }
    &:where(h2) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-display-xs);
        line-height: var(--leading-display-xs);
        margin-bottom: calc(var(--spacing) * 4);
        margin-top: calc(var(--spacing) * 8);
    }
    &:where(h3) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-xl);
        line-height: var(--leading-xl);
        margin-bottom: calc(var(--spacing) * 3);
        margin-top: calc(var(--spacing) * 8);
    }
    &:where(h4) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-lg);
        line-height: var(--leading-lg);
        margin-bottom: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 5);
    }
 
    &:where(h2 + *) {
        margin-top: 0;
    }
    &:where(h3 + *) {
        margin-top: 0;
    }
    &:where(h4 + *) {
        margin-top: 0;
    }
 
    &:where(h1 strong) {
        font-weight: 900;
        color: inherit;
    }
    &:where(h2 strong) {
        font-weight: 800;
        color: inherit;
    }
    &:where(h3 strong) {
        font-weight: 700;
        color: inherit;
    }
    &:where(h4 strong) {
        font-weight: 700;
        color: inherit;
    }
 
    /* Media */
 
    &:where(img) {
        border-radius: var(--radius-xl);
        width: 100%;
        object-fit: cover;
 
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
    &:where(video) {
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
    &:where(figure) {
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 10);
    }
    &:where(figure > *) {
        margin-top: 0;
        margin-bottom: 0;
    }
    &:where(figure:has(> blockquote)) {
        border-left-width: 2px;
        border-left-color: var(--tw-prose-quote-borders);
        padding-top: calc(var(--spacing) * 2);
        padding-bottom: calc(var(--spacing) * 2);
 
        padding-inline-start: calc(var(--spacing) * 4);
    }
    &:where(figure:has(> blockquote) blockquote) {
        padding-inline-start: 0;
        border: none;
    }
    &:where(img + figcaption) {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 1.5);
    }
    &:where(figcaption) {
        color: var(--tw-prose-captions);
 
        font-size: var(--text-sm);
        line-height: var(--leading-sm);
        margin-top: calc(var(--spacing) * 3);
    }
    &:where(cite) {
        font-style: normal;
    }
 
    /* Inline elements */
    &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
        font-weight: 400;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
 
    &:where(a:focus-visible) {
        border-radius: var(--radius-sm);
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 2px;
    }
    &:where(:is(h1, h2, h3) a) {
        color: var(--tw-prose-headings);
        font-weight: inherit;
        text-decoration: none;
    }
 
    /* Inline code element */
    &:where(code:not(pre code)) {
        font-weight: 600;
        border-radius: 4px;
        padding: 1px 2px;
        margin: -1px -2px;
        background: var(--color-bg-tertiary);
        box-shadow: 0 0 0 1px var(--color-border-secondary);
 
        &::before,
        &::after {
            content: "";
        }
    }
}
 
.prose.prose-centered-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    &:where(blockquote) {
        padding-inline-start: 0px !important;
        border-left: none;
        text-align: center;
    }
    &:where(figure:has(> blockquote)) {
        border-left: none;
        padding-inline-start: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        text-align: center;
    }
}
 
.prose.prose-minimal-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    &:where(blockquote) {
        border-left: none;
        padding-inline-start: 0px !important;
    }
    &:where(figure:has(> blockquote)) {
        border-left: none;
        padding-inline-start: 0px !important;
    }
}
 
.prose.md\:prose-lg:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    @media (width >= 48rem /* 768px */) {
        /* Base */
        font-size: var(--text-lg);
        line-height: var(--leading-lg);
    }
}
 
.prose.md\:prose-lg :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    @media (width >= 48rem /* 768px */) {
        /* Text */
        &:where(p) {
            margin-top: calc(var(--spacing) * 4.5);
            margin-bottom: calc(var(--spacing) * 4.5);
        }
 
        &:where([class~="lead"]) {
            font-size: var(--text-xl);
            line-height: var(--leading-xl);
            margin-top: 1.09em;
            margin-bottom: 1.09em;
        }
 
        /* Lists */
        &:where(ol) {
            margin-top: calc(var(--spacing) * 4.5);
            margin-bottom: calc(var(--spacing) * 4.5);
            padding-inline-start: 26px;
        }
        &:where(ul) {
            margin-top: calc(var(--spacing) * 4.5);
            margin-bottom: calc(var(--spacing) * 4.5);
            padding-inline-start: 26px;
        }
 
        &:where(ol > li) {
            padding-inline-start: 1px;
            margin-top: 0;
            margin-bottom: 0;
        }
        &:where(ul > li) {
            padding-inline-start: 1px;
            margin-top: 0;
            margin-bottom: 0;
        }
 
        /* Horizontal rules */
        &:where(hr) {
            margin-top: calc(var(--spacing) * 8);
            margin-bottom: calc(var(--spacing) * 8);
        }
 
        /* Quotes */
        &:where(blockquote) {
            padding-inline-start: 0;
            margin-top: calc(var(--spacing) * 12);
            margin-bottom: calc(var(--spacing) * 12);
        }
        &:where(blockquote p) {
            margin: 0;
 
            font-size: var(--text-display-xs);
            line-height: var(--leading-display-xs);
        }
 
        /* Headings */
        &:where(h1) {
            font-size: var(--text-display-md);
            line-height: var(--leading-display-md);
            margin-bottom: calc(var(--spacing) * 6);
            margin-top: calc(var(--spacing) * 12);
        }
        &:where(h2) {
            font-size: var(--text-display-sm);
            line-height: var(--leading-display-sm);
            margin-bottom: calc(var(--spacing) * 5);
            margin-top: calc(var(--spacing) * 10);
        }
        &:where(h3) {
            font-size: var(--text-display-xs);
            line-height: var(--leading-display-xs);
            margin-bottom: calc(var(--spacing) * 4);
            margin-top: calc(var(--spacing) * 8);
        }
        &:where(h4) {
            font-size: var(--text-xl);
            line-height: var(--leading-xl);
            margin-bottom: calc(var(--spacing) * 3);
            margin-top: calc(var(--spacing) * 8);
        }
        &:where(h2 + *) {
            margin-top: 0;
        }
        &:where(h3 + *) {
            margin-top: 0;
        }
        &:where(h4 + *) {
            margin-top: 0;
        }
 
        &:where(figure) {
            margin-top: calc(var(--spacing) * 12);
            margin-bottom: calc(var(--spacing) * 12);
        }
        &:where(figure > *) {
            margin-top: 0;
            margin-bottom: 0;
        }
        &:where(figure:has(> blockquote)) {
            padding-inline-start: calc(var(--spacing) * 5);
        }
        &:where(figure > blockquote + figcaption) {
            font-size: var(--text-md);
            line-height: var(--leading-md);
        }
 
        &:where(figcaption) {
            margin-top: calc(var(--spacing) * 4);
        }
 
        /* Inline elements */
        &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
            font-weight: 400;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        &:where(:is(h1, h2, h3) a) {
            color: var(--tw-prose-headings);
            font-weight: inherit;
            text-decoration: none;
        }
 
        /* Inline code element */
        &:where(code:not(pre code)) {
            font-weight: 600;
            border-radius: 4px;
            padding: 1px 2px;
            margin: -1px -2px;
            background: var(--color-bg-tertiary);
            box-shadow: 0 0 0 1px var(--color-border-secondary);
        }
    }
}
 
/* Remove top margin from first element */
.prose > :first-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
}
.prose > :last-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0;
}

Import the typography styles

Now, in your global.css file, import the typography.css file:

@import "tailwindcss";
 
@import "@tailwindcss/typography";
@import "./typography.css";

Use the typography styles

And finally, add the prose class to your content:

<div className="prose">
    <h1>Heading level 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
    </blockquote>
</div>

Examples

Below are examples and variations of the typography styles:

Article example

Preview

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.

Introduction

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id.

Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet sodales id est ac volutpat.

Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.

Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam nibh orci.

Software and tools

Other resources

Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.

Lectus id duis vitae porttitor enim gravida morbi.
Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.
Suspendisse maecenas ac donec scelerisque diam sed est duis purus.

Lectus leo massa amet posuere. Malesuada mattis non convallis quisque. Libero sit et imperdiet bibendum quisque dictum vestibulum in non. Pretium ultricies tempor non est diam. Enim ut enim amet amet integer cursus. Sit ac commodo pretium sed etiam turpis suspendisse at.

Headings

Preview

Code

Heading level 1

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

Heading level 2

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Heading level 3

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

Heading level 4

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Images

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Quote default

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

In a world older and more complete than ours they move finished and complete, gifted with extensions of the senses we have lost or never attained, living by voices we shall never hear.

— Olivia Rhye, Product Designer

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Quote with avatar

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

In a world older and more complete than ours they move finished and complete, gifted with extensions of the senses we have lost or never attained, living by voices we shall never hear.

Olivia Rhye

Product Designer

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Quote centered

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Quote minimal

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna.

In a world older and more complete than ours they move finished and complete, gifted with extensions of the senses we have lost or never attained, living by voices we shall never hear.

— Olivia Rhye, Product Designer

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam.

Inline code

Preview

Code

Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra, porttitor.

Feature text

Preview

Code

Tristique odio senectus nam posuere ornare leo metus, ultricies. Blandit duis ultricies vulputate morbi feugiat cras placerat elit. Aliquam tellus lorem sed ac. Montes, sed mattis pellentesque suscipit accumsan. Cursus viverra aenean magna risus elementum faucibus molestie pellentesque. Arcu ultricies sed mauris vestibulum.

Conclusion

Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.

Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis lobortis at sit dictum eget nibh tortor commodo cursus.

Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor.

Dark mode CLI