Letter Spacing

Utilities for controlling the tracking (letter spacing) of an element.

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

WDiv(
  className: 'flex flex-col gap-4',
  children: [
    WText('Tight letter spacing', className: 'tracking-tight'),
    WText('Normal letter spacing', className: 'tracking-normal'),
    WText('Wide letter spacing', className: 'tracking-wide'),
  ],
)

Basic Usage

Use tracking-{size} to control the letter spacing of an element.

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

Quick Reference

Responsive Design

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

WText(
  'Responsive Tracking',
  className: 'tracking-normal md:tracking-wide lg:tracking-widest',
)

Dark Mode

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

WText(
  'Dark Mode Tracking',
  className: 'tracking-normal dark:tracking-wide',
)

Arbitrary Values

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

// Sets letterSpacing to 3px
WText(
  'Custom Spacing',
  className: 'tracking-[3px]',
)

Customizing Theme

To extend or override the default tracking scale, modify the tracking property in WindThemeData.

WindThemeData(
  tracking: {
    'extra-wide': 6.0,
    'mega': 8.0,
  },
)

Then use it in your code:

WText('Mega Spacing', className: 'tracking-mega')

Related Documentation

• Font Size
• Line Height
• Font Weight