Tailwind CSS Typography - Versoly UI

Added in 1.0

Examples

Tailsystem sets a base

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

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

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>

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>

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>