Tailwind CSS Typography
The @tailwindcss/typography plugin adds a set of prose classes that can be used to quickly add sensible typographic styles to content blocks that come from sources like markdown or a CMS database.
Headings
All HTML headings,
<h1>
through
<h6>
, are available.
| Heading | Example |
|---|---|
|
|
h1 heading |
|
|
h2 heading |
|
|
h3 heading |
|
|
h4 heading |
|
|
h5 heading |
|
|
h6 heading |
<!-- headings -->
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>Text
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<div>
<span class=" mb23 block">default</span>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class=" mb23 block">italic</span>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class=" mb23 block">underline</span>
<p class="underline">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class=" mb23 block">overline</span>
<p class="overline">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class=" mb23 block">line-through</span>
<p class="line-through">The quick brown fox jumps over the lazy dog.</p>
</div>Font weight
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<div>
<span class="mb-3">font-light</span>
<p class="font-light text-gray-900">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="mb-3">font-normal</span>
<p class="font-normal text-gray-900">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="mb-3">font-medium</span>
<p class="font-medium text-gray-900">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="mb-3">font-semibold</span>
<p class="font-semibold text-gray-900">The quick brown fox jumps over the lazy dog.</p>
</div>
<div>
<span class="mb-3">font-bold</span>
<p class="font-bold text-gray-900">The quick brown fox jumps over the lazy dog.</p>
</div>Lists
List Disc
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air{' '}
List Decimal
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air{' '}
List none
- Now this is a story all about how, my life got flipped turned upside down
- And I like to take a minute and sit right here
- I'll tell you how I became the prince of a town called Bel-Air{' '}
<div>
<div class="mb-6">
<h4 class="mb-2 block text-base">List Disc</h4>
<ul class="list-disc list-inside">
<li>Now this is a story all about how, my life got flipped turned upside down</li>
<li>And I like to take a minute and sit right here</li>
<li>I'll tell you how I became the prince of a town called Bel-Air{' '}</li>
</ul>
</div>
<div class="mb-6">
<h4 class="mb-2 block text-base">List Decimal</h4>
<ul class="list-decimal list-inside">
<li>Now this is a story all about how, my life got flipped turned upside down</li>
<li>And I like to take a minute and sit right here</li>
<li>I'll tell you how I became the prince of a town called Bel-Air{' '}</li>
</ul>
</div>
<div>
<h4 class="mb-2 block text-base">List none</h4>
<ul class="list-none list-inside">
<li>Now this is a story all about how, my life got flipped turned upside down</li>
<li>And I like to take a minute and sit right here</li>
<li>I'll tell you how I became the prince of a town called Bel-Air{' '}</li>
</ul>
</div>
</div>Text Overflow
The longest word in any of the major English language dictionaries is LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. {' '} LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?,{' '} a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
The longest word in any of the major English language dictionaries is {' '} LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?,{' '} a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
<div class="max-w-sm p-8 border border-gray-300">
<div class="mb-8">
<span class="mb-3">Truncate</span>
<p class="truncate">
The longest word in any of the major English language dictionaries is
<span class="heading-text font-semibold bg-green-100">LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?,</span>
a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
</p>
</div>
<div class="mb-8">
<span class="mb-3">Ellipsis</span>
<p class="text-ellipsis overflow-hidden">
The longest word in any of the major English language dictionaries is
<span class="heading-text font-semibold bg-green-100">{' '} LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?,{' '}</span>
a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
</p>
</div>
<div>
<span class="mb-3">Ellipsis</span>
<p class="text-clip overflow-hidden">
The longest word in any of the major English language dictionaries is
<span class="heading-text font-semibold bg-green-100">{' '} LoremipsumdolorsitMinusperspiciatispariaturtempordoloremqueIuremagnam?,{' '}</span>
a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.
</p>
</div>
</div>