# Letter Spacing

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

- [Basic Usage](#basic-usage)
- [Quick Reference](#quick-reference)
- [Responsive Design](#responsive-design)
- [Dark Mode](#dark-mode)
- [Arbitrary Values](#arbitrary-values)
- [Customizing Theme](#customizing-theme)
- [Related Documentation](#related-documentation)

```dart
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.

```dart
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.

```dart
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.

```dart
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.

```dart
// 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`.

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

Then use it in your code:

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

## Related Documentation

- [Font Size](https://anilcancakir.com/wind_kit/docs/v1.1/typography/font-size.md)
- [Line Height](https://anilcancakir.com/wind_kit/docs/v1.1/typography/line-height.md)
- [Font Weight](https://anilcancakir.com/wind_kit/docs/v1.1/typography/font-weight.md)