# Text Align

Utilities for controlling the alignment of text.

- [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
// Basic alignment examples
WText('Left aligned', className: 'text-left')
WText('Center aligned', className: 'text-center')
WText('Right aligned', className: 'text-right')
```

## Basic Usage

Use `text-left`, `text-center`, `text-right`, and `text-justify` to control the text alignment of an element.

```dart
WDiv(
  className: 'flex flex-col gap-4',
  children: [
    WText('Left aligned text.', className: 'text-left'),
    WText('Center aligned text.', className: 'text-center'),
    WText('Right aligned text.', className: 'text-right'),
    WText('Justified text.', className: 'text-justify'),
  ],
)
```

## Quick Reference

| Class | Value | Description |
|:------|:------|:------------|
| `text-left` | `TextAlign.left` | Align text to the left. |
| `text-center` | `TextAlign.center` | Align text to the center. |
| `text-right` | `TextAlign.right` | Align text to the right. |
| `text-justify` | `TextAlign.justify` | Stretch lines of text to equal width. |
| `text-start` | `TextAlign.start` | Align text to the start (direction-aware). |
| `text-end` | `TextAlign.end` | Align text to the end (direction-aware). |

## Responsive Design

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

```dart
// Center on mobile, left on medium screens and up
WText(
  'Responsive Alignment',
  className: 'text-center md:text-left',
)
```

## Dark Mode

Use the `dark:` prefix to apply different alignment in dark mode. While less common for alignment than colors, it is fully supported.

```dart
WText('Dark mode alignment', className: 'text-left dark:text-center')
```

## Arbitrary Values

The text alignment utility does not support arbitrary values because it maps directly to Flutter's `TextAlign` enum.

## Customizing Theme

Text alignment values are hardcoded to map to Flutter's `TextAlign` enum and cannot be customized via `WindThemeData`.

## Related Documentation

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