Typography

Tailwind

Provides a variety of globally scoped typographic styles.

Getting Started

Excluding Styles

Use the .unstyled class to exclude and zero out typography styles for any individual element.

html
<h2 class="unstyled">Unstyled H2</h2>
<p class="unstyled">Unstyled paragraph element.</p>
<a href="/" class="unstyled">Unstyled anchor element.</a>

Unstyled H2

Unstyled paragraph element.

Unstyled anchor element.

You may then append your own styles as desired.

html
<a href="/" class="unstyled text-orange-500">This link is orange.</a>

Tailwind Plugin

If you're using the Tailwind Typography plugin, all typography within the .prose class will be auto-excluded, allowing the plugin to handle most styles. Global styles like base text color will remain in effect though. See the plugin documentation for implementing overrides.

Headings

html
<h1>Skeleton H1</h1>
<h2>Skeleton H2</h2>
<h3>Skeleton H3</h3>
<h4>Skeleton H4</h4>
<h5>Skeleton H5</h5>
<h6>Skeleton H6</h6>

Skeleton H1

Skeleton H2

Skeleton H3

Skeleton H4

Skeleton H5
Skeleton H6

Paragraph

html
<p>The quick brown fox jumps over the lazy dog.</p>

The quick brown fox jumps over the lazy dog.

Anchor

html
<a href="/">Anchor</a>

Blockquote

html
<blockquote>Skeleton</blockquote>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita cupiditate dolores dignissimos maiores doloremque fugiat, dolore doloribus nisi, repellendus mollitia nostrum, commodi a minus aperiam deleniti. Velit rerum ut tempora!

Pre-formatted Text

html
<pre>The quick brown fox jumps over the lazy dog.</pre>
The quick brown fox jumps over the lazy dog.

Code

html
<code>.myExampleClass</code>
.myExampleClass

Keyboard

html
<p>Press <kbd>⌘ + C</kbd> to copy.</p>

Press ⌘ + C to copy.

Insertion / Deletion

html
<del><s>Always</s> Gonna Give You Up</del>
html
<ins cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022">Never Gonna Give You Up</ins>
Always Gonna Give You Up Never Gonna Give You Up