# text-transform

> Applies `text-transform`.

```ts
import { textTransform } from "@sdxc/u/typography";
```

Applies `text-transform`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.textTransform("uppercase")` | `css({ textTransform: "uppercase" })` |

## Examples

### Basic example

Use `textTransform("uppercase")`, `textTransform("lowercase")` or `textTransform("capitalize")` to change how text is cased on screen, and `textTransform("none")` to keep it as written:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>textTransform("none")</p>
		<p mix={[textTransform("none")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("uppercase")</p>
		<p mix={[textTransform("uppercase")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("lowercase")</p>
		<p mix={[textTransform("lowercase")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>textTransform("capitalize")</p>
		<p mix={[textTransform("capitalize")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.textTransform("uppercase"))
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.textTransform("uppercase"))
```

## Signature

```ts
u.textTransform(value: TextTransformValue)
```