Docs
Layout & Content
Typography

Tailwind CSS Typography

Style text with Tailwind CSS typography utilities for headings, inline elements, lists, blockquotes, and responsive type.

Global settings

Preline uses Tailwind CSS utility classes to control typography. For richer long-form content styling, check out the official Typography plugin.

Font family

Inter is the default font family used in Preline products. Learn more about controlling font families and changing the default.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

1234567890

:’;”<>?.,`\{}[]/!@#$%^&*()_+=

Headings

Heading sizes are applied with Tailwind font-size utilities.

h1. Preline heading

h2. Preline heading

h3. Preline heading

h4. Preline heading

h5. Preline heading

h6. Preline heading

                      
                        <h1 class="text-4xl text-stone-800 dark:text-neutral-200">h1. Preline heading</h1>
                        <h2 class="text-3xl text-stone-800 dark:text-neutral-200">h2. Preline heading</h2>
                        <h3 class="text-2xl text-stone-800 dark:text-neutral-200">h3. Preline heading</h3>
                        <h4 class="text-xl text-stone-800 dark:text-neutral-200">h4. Preline heading</h4>
                        <h5 class="text-lg text-stone-800 dark:text-neutral-200">h5. Preline heading</h5>
                        <h6 class="text-base text-stone-800 dark:text-neutral-200">h6. Preline heading</h6>

Inline text elements

Examples of common inline HTML elements and their default styles.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

                      
                        <p class="text-stone-800 dark:text-neutral-200">You can use the mark tag to <mark>highlight</mark> text.</p>
                        <p class="text-stone-800 dark:text-neutral-200"><del>This line of text is meant to be treated as deleted text.</del></p>
                        <p class="text-stone-800 dark:text-neutral-200"><s>This line of text is meant to be treated as no longer accurate.</s></p>
                        <p class="text-stone-800 dark:text-neutral-200"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                        <p class="text-stone-800 dark:text-neutral-200"><u>This line of text will render as underlined.</u></p>
                        <p class="text-stone-800 dark:text-neutral-200"><small>This line of text is meant to be treated as fine print.</small></p>
                        <p class="text-stone-800 dark:text-neutral-200"><strong>This line rendered as bold text.</strong></p>
                        <p class="text-stone-800 dark:text-neutral-200"><em>This line rendered as italicized text.</em></p>

These tags should be used for semantic purposes:

 represents text which is marked or highlighted for reference or notation purposes.
 represents side-comments and small print, like copyright and legal text.
<s> represents content that is no longer relevant or no longer accurate.
 represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

If you only want the visual styling, use the following classes instead:

.mark will apply the same styles as .
.small will apply the same styles as .
.text-decoration-underline will apply the same styles as .
.text-decoration-line-through will apply the same styles as <s>.

While not shown above, you can also use  and  in HTML5.  highlights words or phrases without conveying additional importance, while  is commonly used for voice, technical terms, and similar text.

Font sizes

Use Tailwind font-size utilities to control the size of text.

Gradient text

Use bg-clip-text, text-transparent, and bg-gradient-* classes to apply a gradient fill to text.

This is a gradient text

                      
                        <p class="bg-clip-text bg-linear-to-tl from-blue-500 to-violet-500 text-transparent">
                          This is a gradient text
                        </p>

Blockquotes

Heads up

Check out the extended blockquote component styles here.

Learn more

Lists

Heads up

Check out the extended list component styles here.

Learn more

Description list alignment

Use utility classes to align terms and descriptions horizontally. For longer terms, you can optionally add .truncate to shorten the text with an ellipsis.

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

                      
                        <dl class="grid sm:grid-cols-3 gap-1 sm:gap-3">
                          <dt class="sm:col-span-1 font-semibold text-stone-800 dark:text-neutral-200">Description lists</dt>
                          <dd class="sm:col-span-2 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">A description list is perfect for defining terms.</dd>

                          <dt class="sm:col-span-1 font-semibold text-stone-800 dark:text-neutral-200">Term</dt>
                          <dd class="sm:col-span-2 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">
                            <p>Definition for the term.</p>
                            <p>And some more placeholder definition text.</p>
                          </dd>

                          <dt class="sm:col-span-1 font-semibold text-stone-800 dark:text-neutral-200">Another term</dt>
                          <dd class="sm:col-span-2 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">This definition is short, so no extra paragraphs or anything.</dd>

                          <dt class="sm:col-span-1 font-semibold truncate text-stone-800 dark:text-neutral-200">Truncated term is truncated</dt>
                          <dd class="sm:col-span-2 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

                          <dt class="sm:col-span-1 font-semibold text-stone-800 dark:text-neutral-200">Nesting</dt>
                          <dd class="sm:col-span-2 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">
                            <dl class="grid sm:grid-cols-5 gap-1 sm:gap-3 text-stone-800 dark:text-neutral-200">
                              <dt class="sm:col-span-2 font-semibold text-stone-800 dark:text-neutral-200">Nested definition list</dt>
                              <dd class="sm:col-span-3 mb-3 sm:mb-0 text-stone-800 dark:text-neutral-200">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
                            </dl>
                          </dd>
                        </dl>

Responsive font sizes

Use responsive modifiers like md: and lg: to change font sizes at different breakpoints.

For example, this renders .text-sm on mobile, .text-base on medium-width screens, and .text-lg on large screens:

                      
                        <p class="text-sm md:text-base lg:text-lg">
                          ...
                        </p>

Check out the Responsive Design documentation for an in-depth look at how these features work.

First-line and first-letter

Style the first line in a block of content using the first-line modifier, and the first letter using the first-letter modifier:

Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.

Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.

                      
                        <p class="first-line:uppercase first-line:tracking-widest
                          first-letter:text-7xl first-letter:font-bold first-letter:text-stone-900
                          first-letter:mr-3 first-letter:float-left
                        ">
                          Well, let me tell you something, funny boy. Y'know that little stamp, the one
                          that says "New York Public Library"? Well that may not mean anything to you,
                          but that means a lot to me. One whole hell of a lot.
                        </p>

Open/closed state

Use the open: modifier to conditionally apply styles when a <details> or <dialog> element is open:

Try toggling the disclosure to see the styles change

Why do they call it Ovaltine?

The mug is round. The jar is round. They should call it Roundtine.

                      
                        <div class="max-w-lg mx-auto p-8">
                          <details class="open:bg-white dark:open:bg-neutral-900 open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-lg" open>
                            <summary class="text-sm/6 text-stone-800 dark:text-neutral-200 font-semibold select-none">
                              Why do they call it Ovaltine?
                            </summary>
                            <div class="mt-3 text-sm/6 text-stone-600 dark:text-neutral-400">
                              <p>The mug is round. The jar is round. They should call it Roundtine.</p>
                            </div>
                          </details>
                        </div>