Lead paragraph text - Important introductory content that needs to stand out from regular body text.

text-xl text-gray-700 - Lead text

Regular body text - Standard paragraph content for articles, descriptions, and general content that users will read.

text-base text-gray-700 - Body text

Small text - Secondary information, captions, and supporting details that complement the main content.

text-sm text-gray-600 - Small text

Extra small text - Fine print, metadata, timestamps, and minimal supporting information.

text-xs text-gray-500 - Extra small

text-left - Left aligned text content

text-center - Center aligned text content

text-right - Right aligned text content

text-justify - Justified text content that stretches to fill the available width by adjusting spacing between words

leading-tight - Tight line height for compact text layouts and headings where space is at a premium.

leading-normal - Normal line height for regular body text and standard content that provides good readability.

leading-relaxed - Relaxed line height for improved readability in longer form content and articles.

leading-loose - Loose line height for maximum readability and breathing room in text content.

Inline code: console.log('Hello World')

Use font-mono for code elements

Code Block

function greetUser(name) {
    return `Hello, ${name}! Welcome to Sparkles.`;
}

greetUser('Designer');