# Text Transform

Change the capitalization of text content at render time without modifying the source string.

- [Basic Usage](#basic-usage)
- [Quick Reference](#quick-reference)
- [Responsive Design](#responsive-design)
- [Related Documentation](#related-documentation)

```dart
WText('upper case', className: 'uppercase');
WText('LOWER CASE', className: 'lowercase');
WText('capitalize this text', className: 'capitalize');
WText('No transformation here.', className: 'none');
```

## Basic Usage

Apply a transform class in the `className` of any text widget. The transformation runs at render time; the original `data` string is never mutated:

```dart
WText('button label', className: 'uppercase font-semibold text-white');
WText('email@example.com', className: 'lowercase text-gray-700 dark:text-gray-300');
WText('first word only', className: 'capitalize');
```

## Quick Reference

| Class | Transformation | Description |
|:------|:---------------|:------------|
| `uppercase` | `toUpperCase()` | Converts all characters to uppercase. |
| `lowercase` | `toLowerCase()` | Converts all characters to lowercase. |
| `capitalize` | First char upper, rest lower | Capitalizes the first character of the text. |
| `none` | No change | Leaves the text unchanged. |

## Responsive Design

Combine with breakpoint prefixes to apply a transform only at certain screen sizes:

```dart
WText('label text', className: 'none md:uppercase');
```

## Related Documentation

- [Font Size](https://anilcancakir.com/wind_kit/docs/v0.0/typography/font-size.md) — set text size.
- [Text Color](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-color.md) — apply color to text.
- [Text Decoration](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-decoration.md) — underline, overline, and strikethrough.
- [WText](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wtext.md) — the primary text widget.