---
title: "css"
description: "Brand-enforced wrapper over `remix/component`'s `css()` mixin. Token-mapped longhands accept the matching token brand, CSS-wide keywords, property keywords, and `0`; anything else — including a raw `color: \"#ff0000\"` — is a type error. Every other CSS property carries csstype's value union, so `display`, `position`, `resize`, and the rest of the closed-grammar properties accept only their real keywords. Nested selectors, at-rules, and custom properties recurse."
url: "https://pitlane.tools/package/theme/function/css"
---

# css

```ts
import { css } from "@pitlane/theme";
```

```ts
function css<node>(styles): ThemedCSSMixin<node>;
```

Brand-enforced wrapper over `remix/component`'s `css()` mixin. Token-mapped longhands accept the matching token brand, CSS-wide keywords, property keywords, and `0`; anything else — including a raw `color: "#ff0000"` — is a type error. Every other CSS property carries csstype's value union, so `display`, `position`, `resize`, and the rest of the closed-grammar properties accept only their real keywords. Nested selectors, at-rules, and custom properties recurse.

Branded token refs are already `var()` strings and pass through; an array value joins with spaces, which is how the box shorthands take a 1–4 tuple. A comma list needs a template string.

Inline `css()` infers its node type from `mix`. Reusable descriptors need an explicit type, such as `css<HTMLAnchorElement>(styles)`, matching their elements.

Interpolating a token into a template string (```1px solid ${t.color.line}```) yields a plain string, which the open-grammar shorthands accept.

## Type Parameters

### node

`node` _extends_ `Element` = `Element`

## Parameters

### styles

[`ThemedCSSProps`](https://pitlane.tools/package/theme/interface/ThemedCSSProps.md)

## Returns

[`ThemedCSSMixin`](https://pitlane.tools/package/theme/type/ThemedCSSMixin.md)\<`node`>

## See

- [ThemedCSSProps](https://pitlane.tools/package/theme/interface/ThemedCSSProps.md) for the accepted per-property values.
- [ThemedCSSMixin](https://pitlane.tools/package/theme/type/ThemedCSSMixin.md) for the returned descriptor.
- [Theme guide: Use tokens in styles](https://pitlane.tools/guides/theme.md#use-tokens-in-styles)

## Example

```tsx
<div
    mix={css({
        color: t.color.bg,
        padding: [t.space.sm, t.space.md],
        margin: 0,
        "&:hover": { color: t.color.gray[900] },
    })}
/>
```