Line Height

// Relative line-heights
// `leading-none` is not supported yet; use `leading-tight` or override a named key.
WText('Leading tight', className: 'leading-tight')
WText('Leading loose', className: 'leading-loose')

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

Basic Usage#

Use leading-{value} to control the line height of an element. Relative line heights (like normal, loose) are multipliers of the font size, while fixed line heights (like leading-6) are logical pixels. A fixed line height needs a font size on the same widget (a text-* class): Wind divides the pixels by that size to get Flutter's height factor, and without one the line height is not applied.

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',
    ),
  ),
)

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-tight 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: 'text-base leading-[24px]')

// A bare number is also logical pixels
WText('Custom bare number', className: 'text-base leading-[24]')

A fixed pixel line height needs a font size on the same widget (text-base above): Wind divides the pixels by that size to get Flutter's height factor, and without one the line height is not applied. A size inherited from a parent does not count.

Arbitrary values are logical pixels, not a multiplier. rem is not converted: leading-[1.8] is 1.8 px and leading-[3rem] is 3 px.

Customizing Theme#

To override the named line height scale, modify the leading property in WindThemeData.

WindThemeData(
  leading: {
    'loose': 2.5,
  },
)

Only the six named keys parse (none, tight, snug, normal, relaxed, loose); override their values, do not add keys. none has no default value, so leading-none does nothing until you supply one ('none': 1.0).

Related Documentation#

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