# tab-size

> Applies `tab-size`.

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

Applies `tab-size`. A bare number is stringified so it stays unitless — CSS
would otherwise read it as a `px` length — while a string such as `"4ch"`
passes through unchanged as a CSS length.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.tabSize()` | `css({ tabSize: "2" })` |
| `u.tabSize(4)` | `css({ tabSize: "4" })` |
| `u.tabSize("4ch")` | `css({ tabSize: "4ch" })` |

## Examples

### Basic example

Use `tabSize(n)` to set how many spaces wide a tab character is drawn in preformatted text; `tabSize()` uses 2:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>tabSize()</p>
		<pre mix={[tabSize(), ...]}>
			{"if (ready) {\n\tif (loud) {\n\t\tannounce();\n\t}\n\tstart();\n}"}
		</pre>
	</div>
	<div>
		<p mix={[...]}>tabSize(8)</p>
		<pre mix={[tabSize(8), ...]}>
			{"if (ready) {\n\tif (loud) {\n\t\tannounce();\n\t}\n\tstart();\n}"}
		</pre>
	</div>
</div>
```

### Using a length

Pass a length, like `tabSize("6rem")`, to set tab stops in any unit:

```tsx
<pre mix={[tabSize("6rem"), ...]}>
	{"City\tHigh\tLow\nLisbon\t24°\t17°\nOslo\t12°\t4°\nCairo\t33°\t21°"}
</pre>
```

## Applying on a state

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

```ts
u.hover(u.tabSize())
```

## Responsive design

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

```ts
u.at("md", u.tabSize())
```

## Signature

```ts
u.tabSize(value?: number | (string & {}))
```