Typography
TailwindProvides a variety of globally scoped typographic styles.
Stylesheets
Package
Source
Doc
Getting Started
Excluding Styles
Use the .unstyled
class to exclude and zero out typography styles for any individual element.
<h2 class="unstyled">Unstyled H2</h2>
<p class="unstyled">Unstyled paragraph element.</p>
<a href="/" class="unstyled">Unstyled anchor element.</a>
You may then append your own styles as desired.
<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
<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
<p>The quick brown fox jumps over the lazy dog.</p>
The quick brown fox jumps over the lazy dog.
Blockquote
<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
<pre>The quick brown fox jumps over the lazy dog.</pre>
The quick brown fox jumps over the lazy dog.
Code
<code>.myExampleClass</code>
.myExampleClass
Keyboard
<p>Press <kbd>⌘ + C</kbd> to copy.</p>
Press ⌘ + C to copy.
Insertion / Deletion
<del><s>Always</s> Gonna Give You Up</del>
<ins cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022">Never Gonna Give You Up</ins>