Typography Utilities

Font Size

Control text size:

<p class="bismillah-text-xs">Extra small text</p>
<p class="bismillah-text-sm">Small text</p>
<p class="bismillah-text-base">Base (normal) text</p>
<p class="bismillah-text-lg">Large text</p>
<p class="bismillah-text-xl">Extra large text</p>
<p class="bismillah-text-2xl">2XL text</p>
<p class="bismillah-text-3xl">3XL text</p>
<p class="bismillah-text-4xl">4XL text</p>
<p class="bismillah-text-5xl">5XL text</p>

Font Weight

Control text thickness:

<p class="bismillah-font-thin">Thin (100)</p>
<p class="bismillah-font-extralight">Extra light (200)</p>
<p class="bismillah-font-light">Light (300)</p>
<p class="bismillah-font-normal">Normal (400)</p>
<p class="bismillah-font-medium">Medium (500)</p>
<p class="bismillah-font-semibold">Semibold (600)</p>
<p class="bismillah-font-bold">Bold (700)</p>
<p class="bismillah-font-extrabold">Extra bold (800)</p>
<p class="bismillah-font-black">Black (900)</p>

Font Family

Control font family:

<p class="bismillah-font-sans">Sans serif font</p>
<p class="bismillah-font-serif">Serif font</p>
<p class="bismillah-font-mono">Monospace font</p>

Text Color

Control text color:

<p class="bismillah-text-gray-900">Dark gray text</p>
<p class="bismillah-text-gray-600">Medium gray text</p>
<p class="bismillah-text-gray-400">Light gray text</p>
<p class="bismillah-text-blue-600">Blue text</p>
<p class="bismillah-text-red-500">Red text</p>
<p class="bismillah-text-green-600">Green text</p>

Text Alignment

Control text alignment:

<p class="bismillah-text-left">Left aligned</p>
<p class="bismillah-text-center">Center aligned</p>
<p class="bismillah-text-right">Right aligned</p>
<p class="bismillah-text-justify">Justified</p>

Text Decoration

Add or remove text decorations:

<a class="bismillah-underline">Underlined link</a>
<p class="bissmill-no-underline">No underline</p>
<p class="bismillah-line-through">Strikethrough text</p>
<p class="bismillah-overline">Overline text</p>

Text Transform

Control text transformation:

<p class="bismillah-uppercase">UPPERCASE TEXT</p>
<p class="bismillah-lowercase">lowercase text</p>
<p class="bismillah-capitalize">Capitalize text</p>
<p class="bismillah-normal-case">normal case text</p>

Line Height

Control spacing between lines:

<p class="bismillah-leading-3">Very tight line height</p>
<p class="bismillah-leading-normal">Normal line height</p>
<p class="bismillah-leading-relaxed">Relaxed line height</p>
<p class="bismillah-leading-loose">Loose line height</p>

Letter Spacing

Control spacing between letters:

<p class="bismillah-tracking-tighter">Tighter letter spacing</p>
<p class="bismillah-tracking-normal">Normal letter spacing</p>
<p class="bismillah-tracking-wide">Wide letter spacing</p>
<p class="bismillah-tracking-wider">Wider letter spacing</p>
<p class="bismillah-tracking-widest">Widest letter spacing</p>

Text Overflow

Handle text that exceeds container:

<!-- Single line with ellipsis -->
<p class="bismillah-truncate">This text will be truncated with ellipsis if it's too long</p>

<!-- Multiple lines with ellipsis -->
<p class="bismillah-line-clamp-3">This text will show maximum 3 lines before being truncated with ellipsis</p>

<!-- Text wrapping -->
<p class="bismillah-break-words">Break-words ensures text wraps to next line</p>
<p class="bismillah-break-all">Break-all breaks text within words</p>

Font Style

Set italic or normal style:

<p class="bismillah-italic">Italic text</p>
<p class="bismillah-not-italic">Normal (not italic) text</p>

Text Shadow

Add shadow to text:

<p class="bismillah-text-shadow">Text with shadow</p>
<p class="bismillah-text-shadow-lg">Text with larger shadow</p>

Vertical Alignment

Align inline or table-cell elements:

<div class="bismillah-flex bismillah-items-start">Top aligned items</div>
<div class="bismillah-flex bismillah-items-center">Center aligned items</div>
<div class="bismillah-flex bismillah-items-end">Bottom aligned items</div>

Common Patterns

<h1 class="bismillah-text-4xl bismillah-font-bold bismillah-text-gray-900">Main Heading</h1>
<h2 class="bismillah-text-3xl bismillah-font-bold bismillah-text-gray-900 bismillah-mt-8">Subheading</h2>
<h3 class="bismillah-text-2xl bismillah-font-semibold bismillah-text-gray-900 bismillah-mt-6">Subsection</h3>

<p class="bismillah-text-base bismillah-text-gray-700 bismillah-leading-relaxed">
  This is a paragraph of body text with relaxed line height for better readability.
</p>

<p class="bismillah-text-sm bismillah-text-gray-600">
  This is smaller supplementary text.
</p>

<label class="bismillah-block bismillah-text-sm bismillah-font-medium bismillah-text-gray-700 bismillah-mb-1">
  Email Address
</label>

<span class="bismillah-text-xs bismillah-text-gray-500 bismillah-uppercase bismillah-tracking-wide">
  Caption text
</span>

<!-- Small on mobile, larger on desktop -->
<h1 class="bismillah-text-2xl md:bismillah-text-4xl lg:bismillah-text-5xl bismillah-font-bold">
  Responsive Heading
</h1>

<p class="bismillah-text-sm md:bismillah-text-base lg:bismillah-text-lg">
  Responsive paragraph text
</p>

Combining Utilities

<!-- Create a nice heading -->
<h1 class="bismillah-text-3xl bismillah-font-bold bismillah-text-gray-900 bismillah-tracking-tight bismillah-leading-tight">
  Beautiful Typography
</h1>

<!-- Create readable body text -->
<p class="bismillah-text-base bismillah-text-gray-700 bismillah-leading-relaxed bismillah-max-w-2xl">
  Combine multiple utilities to create professional typography that's both beautiful and readable.
</p>

<!-- Create a link -->
<a href="#" class="bismillah-text-blue-600 bismillah-font-medium bismillah-underline hover:bismillah-text-blue-700">
  Learn more
</a>