Font Size

Utilities for controlling the font size of an element.

• Basic Usage
• Quick Reference
• Variants
• Responsive Design
• Dark Mode
• Arbitrary Values
• Customizing Theme
• Related Documentation

WText('Small text', className: 'text-sm')
WText('Large text', className: 'text-lg')
WText('Extra large', className: 'text-xl')

Basic Usage

Use text-{size} to set the font size of an element.

WText(
  'The quick brown fox jumps over the lazy dog.',
  className: 'text-base',
)

WText(
  'Main Heading',
  className: 'text-4xl font-bold',
)

Quick Reference

For sizes beyond text-6xl, use the arbitrary-value syntax (text-[80px]) or extend WindThemeData.fontSizes with additional entries.

Variants

Line Height Modifier

You can set the line height simultaneously by adding a forward slash and a line-height value to any font size utility.

This supports both named line heights (from your theme) and numeric spacing values.

// Named line height (text-lg + leading-loose)
WText('Loose text', className: 'text-lg/loose')

// Numeric spacing (text-base + 28px line height)
// 7 * 4px = 28px
WText('Spaced text', className: 'text-base/7')

// Arbitrary line height
WText('Precise text', className: 'text-xl/[32px]')

Responsive Design

Apply different font sizes at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.

WText(
  'Responsive Text',
  className: 'text-sm md:text-base lg:text-xl',
)

Dark Mode

Use the dark: prefix to apply different font sizes when the application is in dark mode.

WText(
  'Dynamic Sizing',
  className: 'text-base dark:text-lg',
)

Arbitrary Values

If the built-in scale doesn't meet your needs, use bracket notation to apply custom values directly.

// Exact pixel value
WText('15px text', className: 'text-[15px]')

// Rem value (treated as pixels if no unit provided, or parsed explicitly)
WText('1.5rem text', className: 'text-[1.5rem]')

Customizing Theme

To extend or override the default font size scale, modify the fontSizes property in WindThemeData.

WindThemeData(
  fontSizes: {
    // Override existing
    'xs': 10.0,
    
    // Add new custom size
    'mega': 100.0,
  },
)

Usage:

WText('Tiny text', className: 'text-xs') // 10.0
WText('Huge text', className: 'text-mega') // 100.0

Related Documentation

• Font Weight
• Line Height
• Text Color