Typography
Typography utilities for controlling font size, weight, line height, alignment, and more.
Font Sizes
Control the font size of an element using the text-size utilities.
HTML
<p class="text-xs">Extra Small text (12px)</p>
<p class="text-sm">Small text (14px)</p>
<p class="text-base">Base text (16px)</p>
<p class="text-lg">Large text (18px)</p>
<p class="text-xl">Extra Large text (20px)</p>
<p class="text-2xl">2XL text (24px)</p>
<p class="text-3xl">3XL text (30px)</p>
<p class="text-4xl">4XL text (36px)</p>
<p class="text-5xl">5XL text (48px)</p>
<p class="text-6xl">6XL text (60px)</p>Font Weights
Control the font weight of an element.
HTML
<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra Light (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra Bold (800)</p>
<p class="font-black">Black (900)</p>Line Heights
Control the line height of an element.
HTML
<p class="leading-none">No leading</p>
<p class="leading-tight">Tight leading</p>
<p class="leading-snug">Snug leading</p>
<p class="leading-normal">Normal leading</p>
<p class="leading-relaxed">Relaxed leading</p>
<p class="leading-loose">Loose leading</p>Text Alignment
Control the text alignment of an element.
HTML
<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">Justified text</p>Text Decoration
Control the text decoration of an element.
HTML
<p class="underline">Underlined text</p>
<p class="line-through">Line-through text</p>
<p class="no-underline">No underline text</p>Text Transform
Control the capitalization of text.
HTML
<p class="uppercase">Uppercase text</p>
<p class="lowercase">Lowercase text</p>
<p class="capitalize">Capitalized text</p>Letter Spacing
Control the letter spacing of an element.
HTML
<p class="tracking-tighter">Tighter tracking</p>
<p class="tracking-tight">Tight tracking</p>
<p class="tracking-normal">Normal tracking</p>
<p class="tracking-wide">Wide tracking</p>
<p class="tracking-wider">Wider tracking</p>
<p class="tracking-widest">Widest tracking</p>Text Colors
Control the text color of an element.
HTML
<p class="text-gray-900">Gray 900 text</p>
<p class="text-gray-600">Gray 600 text</p>
<p class="text-gray-400">Gray 400 text</p>
<p class="text-blue-500">Blue 500 text</p>
<p class="text-red-500">Red 500 text</p>
<p class="text-green-500">Green 500 text</p>