Tailwind CSS Typography - Versoly UI

Added in 1.0

Examples

Versoly UI sets default sizes for each heading size and margin bottom

Heading - h1

Heading - h2

Heading - h3

Heading - h4

Heading - h5
<h1>Heading - h1</h1>
<h2>Heading - h2</h2>
<h3>Heading - h3</h3>
<h4>Heading - h4</h4>
<h5>Heading - h5</h5>

Heading Classes

Heading - h1

Heading - h2

Heading - h3

Heading - h4

Heading - h5

<h3 class="h1">Heading - h1</h3>
<h3 class="h2">Heading - h2</h3>
<h3 class="h3">Heading - h3</h3>
<h3 class="h4">Heading - h4</h3>
<h3 class="h5">Heading - h5</h3>

Display Headings

Display heading use responsive font sizes based on screen width. They look great on all screens and make it easier to build responsive sites quicker.

Display - 1

Display - 2

Display - 3

Display - 4

Display - 5

Display - 6

<h2 class="display-1">Display - 1</h2>
<h2 class="display-2">Display - 2</h2>
<h2 class="display-3">Display - 3</h2>
<h2 class="display-4">Display - 4</h2>
<h2 class="display-5">Display - 5</h2>
<h2 class="display-6">Display - 6</h2>

Header Font Weights

Font - Light

Font - Normal

Font - Medium

Font - Semibold

Font - Extrabold

<h2 class="font-light">Font - Light</h2>
<h2 class="font-normal">Font - Normal</h2>
<h2 class="font-medium">Font - Medium</h2>
<h2 class="font-semibold">Font - Semibold</h2>
<h2 class="font-extrabold">Font - Extrabold</h2>

Text Font Weights

Font - Light

Font - Normal

Font - Medium

Font - Semibold

Font - Extrabold

<p class="font-light">Font - Light</p>
<p class="font-normal">Font - Normal</p>
<p class="font-medium">Font - Medium</p>
<p class="font-semibold">Font - Semibold</p>
<p class="font-extrabold">Font - Extrabold</p>

Colors

Header - Primary

Header - Secondary

Header - Tertiary

Header - Dark

Header - Muted

<h1 class="display-4 text-primary font-semibold">Header - Primary</h1>
<h1 class="display-4 text-secondary font-semibold">Header - Secondary</h1>
<h1 class="display-4 text-tertiary font-semibold">Header - Tertiary</h1>
<h1 class="display-4 text-dark font-semibold">Header - Dark</h1>
<h1 class="display-4 text-muted font-semibold">Header - Muted</h1>
<p><a href="#" class="text-primary font-semibold text-lg">Link - Primary</a></p>
<p><a href="#" class="text-secondary font-semibold text-lg">Link - Secondary</a></p>
<p><a href="#" class="text-tertiary font-semibold text-lg">Link - Tertiary</a></p>
<p><a href="#" class="text-neutral font-semibold text-lg">Link - Neutral</a></p>
<p><a href="#" class="text-success font-semibold text-lg">Link - Success</a></p>
<p><a href="#" class="text-info font-semibold text-lg">Link - Info</a></p>
<p><a href="#" class="text-danger font-semibold text-lg">Link - Danger</a></p>
<p><a href="#" class="text-warning font-semibold text-lg">Link - Warning</a></p>

Gradients

Primary to Secondary

Primary to Tertiary

Secondary to Primary

<h1 class="display-4 font-semibold bg-clip-text text-transparent bg-gradient-to-br from-primary to-secondary">Primary to Secondary</h1>
<h1 class="display-4 font-semibold bg-clip-text text-transparent bg-gradient-to-br from-primary to-tertiary">Primary to Tertiary</h1>
<h1 class="display-4 font-semibold bg-clip-text text-transparent bg-gradient-to-br from-secondary to-tertiary">Secondary to Primary</h1>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

<blockquote class="blockquote blockquote-primary">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-secondary">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-tertiary">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-neutral">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-success">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-info">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-danger">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>
<blockquote class="blockquote blockquote-warning">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</blockquote>

Unstyled List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

Unordered List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul class="list-inside list-decimal">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

Ordered List - Inside

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul class="list-inside list-disc">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>

Ordered List - Outside

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum
<ul class="list-outside list-disc ml-4">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>