Letter Spacing
Utilities for controlling the tracking (letter spacing) of an element.
On this page
typography/letter_spacing
The live demo is not available for this example.
letter_spacing.dart
View source
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#
| Class | Value | Description |
|---|---|---|
tracking-tighter |
-2.0 | Tighter than default spacing |
tracking-tight |
-1.0 | Slightly tighter spacing |
tracking-normal |
0.0 | Standard spacing (default) |
tracking-wide |
1.0 | Slightly wider spacing |
tracking-wider |
2.0 | Wider than default spacing |
tracking-widest |
4.0 | Widest available spacing |
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')