Headings

All HTML headings, <h1> through <h6>, are available.

Typography
<h1 class="mb-2 text-4xl font-bold text-heading">h1 heading</h1>
<h2 class="mb-2 text-3xl font-bold text-heading">h2 heading</h2>
<h3 class="mb-2 text-2xl font-bold text-heading">h3 heading</h3>
<h4 class="mb-2 text-xl font-bold text-heading">h4 heading</h4>
<h5 class="mb-2 text-lg font-bold text-heading">h5 heading</h5>
<h6 class="font-bold text-heading">h6 heading</h6>

Inline text elements

Styling for common inline HTML5 elements.

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

Text utilities

Change text alignment, transform, style, weight, line-height, decoration, color and all other properties with Tailwind’s text utilities and color utilities.

Blockquotes

Basic Blockquotes can be styles using Tailwind’s utility classes too.

Blockquotes
<!-- Default -->
<figure class="mb-10">
    <blockquote>
        <p class="text-xl">A well-known quote, contained in a blockquote element</p>
    </blockquote>
    <figcaption class="mt-1 text-muted before:content-['—']">
        Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

<!-- Centered -->
<figure class="mb-10 text-center">
    <blockquote>
        <p class="text-xl">A well-known quote, contained in a blockquote element</p>
    </blockquote>
    <figcaption class="mt-1 text-muted before:content-['—']">
        Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

<!-- Right aligned -->
<figure class="text-right">
    <blockquote>
        <p class="text-xl">A well-known quote, contained in a blockquote element</p>
    </blockquote>
    <figcaption class="mt-1 text-muted before:content-['—']">
        Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

Lists

Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding. Use List Style Type utility classes to style them.

Lists
<!-- Default -->
<ul>
    <li class="mb-2">This is a list.</li>
    <li class="mb-2">It appears completely unstyled.</li>
    <li class="mb-2">Structurally, it's still a list.</li>
    <li class="mb-2">However, this style only applies to immediate child elements.</li>
    <li>This may still come in handy in some situations.</li>
</ul>

<!-- Disc -->
<ul class="list-disc">
    <li class="mb-2">This is a list.</li>
    <li class="mb-2">It appears completely unstyled.</li>
    <li class="mb-2">Structurally, it's still a list.</li>
    <li class="mb-2">However, this style only applies to immediate child elements.</li>
    <li>This may still come in handy in some situations.</li>
</ul>

<!-- Decimal -->
<ul class="list-decimal">
    <li class="mb-2">This is a list.</li>
    <li class="mb-2">It appears completely unstyled.</li>
    <li class="mb-2">Structurally, it's still a list.</li>
    <li class="mb-2">However, this style only applies to immediate child elements.</li>
    <li>This may still come in handy in some situations.</li>
</ul>