Line Height

Utilities for controlling the leading (line height) of an element.

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

// Relative line-heights
WText('Leading none', className: 'leading-none')
WText('Leading loose', className: 'leading-loose')

// Fixed line-heights
WText('Leading 6', className: 'leading-6')

Basic Usage

Use leading-{value} to control the line height of an element. Relative line heights (like normal, loose) depend on the font size, while fixed line heights (like leading-6) set a specific height independent of the font size.

WDiv(
  className: 'max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl',
  child: WDiv(
    className: 'p-8',
    child: WText(
      'The quick brown fox jumps over the lazy dog.',
      className: 'leading-loose text-gray-900',
    ),
  ),
)

[!NOTE] You can also set line height directly within the font size utility, e.g., text-lg/7 or text-lg/loose. See Font Size for details.

Quick Reference

Responsive Design

Apply different line height values at different breakpoints using the standard sm:, md:, lg:, xl:, and 2xl: prefixes.

WText(
  'Responsive leading',
  className: 'leading-none md:leading-normal lg:leading-loose',
)

Dark Mode

Use the dark: prefix to apply different line heights when the application is in dark mode.

WText(
  'Dark mode leading',
  className: 'leading-normal dark:leading-loose',
)

Arbitrary Values

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

// Fixed pixel value
WText('Custom px', className: 'leading-[24px]')

// Relative value (unitless)
WText('Custom relative', className: 'leading-[1.8]')

// Rem value
WText('Custom rem', className: 'leading-[3rem]')

Customizing Theme

To extend or override the default line height scale, modify the leading property in WindThemeData.

WindThemeData(
  leading: {
    'tighter': 1.1,
    'double': 2.0,
    // Overriding existing
    'loose': 2.5,
  },
)

Related Documentation

• Font Size - Setting font size and line height together
• Letter Spacing - Controlling tracking (letter spacing)