Typography

Text Size

Extra Small Text

Small Text

Medium Text

Large Text

Extra Large Text

2XL Text

3XL Text

4XL Text

5XL Text

6XL Text

7XL Text

8XL Text

9XL Text

<h1 class="text-xs">Extra Small Text</h1>
<h1 class="text-sm">Small Text</h1>
<h1 class="text-md">Medium Text</h1>
<h1 class="text-lg">Large Text</h1>
<h1 class="text-xl">Extra Large Text</h1>
<h1 class="text-2xl">2XL Text</h1>
<h1 class="text-3xl">3XL Text</h1>
<h1 class="text-4xl">4XL Text</h1>
<h1 class="text-5xl">5XL Text</h1>
<h1 class="text-6xl">6XL Text</h1>
<h1 class="text-7xl">7XL Text</h1>
<h1 class="text-8xl">8XL Text</h1>
<h1 class="text-9xl">9XL Text</h1>

Font Weight

Thin Text

Extra Light Text

Light Text

Normal Text

Medium Text

Semibold Text

Bold Text

Extra Bold Text

Black Text

<h1 class="font-thin">Thin Text</h1>
<h1 class="font-extralight">Extra Light Text</h1>
<h1 class="font-light">Light Text</h1>
<h1 class="font-normal">Normal Text</h1>
<h1 class="font-medium">Medium Text</h1>
<h1 class="font-semibold">Semibold Text</h1>
<h1 class="font-bold">Bold Text</h1>
<h1 class="font-extrabold">Extra Bold Text</h1>
<h1 class="font-black">Black Text</h1>

Text Align

Left Aligned Text

Center Aligned Text

Right Aligned Text

This is a justified text.

<p class="text-left">Left Aligned Text</p>
<p class="text-center">Center Aligned Text</p>
<p class="text-right">Right Aligned Text</p>
<p class="text-justify">This is a justified text</p>

Text Style

Italic Text

Undeline Text

Overline Text

Line Through text

No Underline text 
<p class="italic">Italic Text</p>
<p class="underline">Undeline Text</p>
<p class="overline">Overline Text</p>
<p class="line-through">Line Through text</p>
<a href="#" class="no-underline">No Underline text</a>