# outline-width

> Sets `outline-width` alone, so a state can override the width while the color and style already in effect stay in force.

```ts
import { outlineWidth } from "@sdxc/u/color";
```

Sets `outline-width` alone, so a state can override the width while the
color and style already in effect stay in force. A bare number is treated
as pixels; a string passes through unchanged.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.outlineWidth(4)` | `css({ outlineWidth: "4px" })` |
| `u.outlineWidth("0.25rem")` | `css({ outlineWidth: "0.25rem" })` |

## Examples

### Basic example

Use `outlineWidth` with a number of pixels to set only the width of an outline:

```tsx
<div mix={[...]}>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(1), ...]}>
		outlineWidth(1)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(2), ...]}>
		outlineWidth(2)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(4), ...]}>
		outlineWidth(4)
	</div>
	<div mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth(8), ...]}>
		outlineWidth(8)
	</div>
</div>
```

### CSS lengths

Pass a string for any CSS length or keyword, like `0.25rem` or `thick`:

```tsx
<div mix={[...]}>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("0.25rem"), ...]}
	>
		0.25rem
	</div>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("0.5em"), ...]}
	>
		0.5em
	</div>
	<div
		mix={[outlineStyle("solid"), outlineColor("brand"), outlineWidth("thick"), ...]}
	>
		thick
	</div>
</div>
```

## Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

```ts
u.outlineWidth("2.75rem")
```

## Applying on a state

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

```ts
u.hover(u.outlineWidth(4))
```

## Responsive design

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

```ts
u.at("md", u.outlineWidth(4))
```

## Signature

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