---
title: "prefer-typed-variables"
description: "Reports a custom property without a type in a utility that accepts several types."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# prefer-typed-variables

This rule reports a custom property without a type in a utility that accepts
several types. For example, `text-*` sets a color or a font size, so
`text-(--brand)` does not show which one you mean. The `stylistic` preset enables
this rule.

## Reported

```tsx
style("text-(--brand)");
```

> prefer-typed-variables: `text-(--brand)` has no type hint, so it uses the `color` definition; write `text-(color:--brand)` to state the type
> 
> Example:1:13

## Fixed

```tsx
style("text-(color:--brand)");
```

## How to fix

Add the type that the custom property holds, such as `color:` in the example, or
`length:` for a font size. The type only chooses the meaning of the utility. It
does not check the value that the property receives at runtime.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | off |
| `strict` | off |
| `stylistic` | warn |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/prefer-typed-variables/index.mdx