---
title: "incompatible-property-value"
description: "Reports a utility value that the browser rejects for its CSS property."
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.

# incompatible-property-value

This rule reports a utility whose value the browser rejects for its CSS property.
The compiler still writes the CSS, but the browser ignores the declaration. For
example, `w-[1/2]` writes `width: 1/2`, which is not a valid width.

The compiler checks an arbitrary value against the grammar of each CSS property
that receives it. A value that every receiving property accepts is not reported,
even when no value type of the utility accepts it, such as `basis-[content]`.

Some utilities pass the value only to custom properties, such as `--tw-blur` for
`blur-[5%]`, so no property grammar can check it. When no value type of such a
utility accepts the value, the rule reports that the utility does not accept it.

For a utility that your own stylesheet defines, the rule also checks the other
declarations that the utility writes, such as a bare value in `fg-5` from
`@utility fg-* { color: --value(integer); }`. It skips values that contain
`var()`, values that come from theme tokens, and custom properties.
[incompatible-theme-value](/docs/lints/incompatible-theme-value) checks theme
tokens where you define them. By default, the rule does not check the
definitions of packages and plugins, because you cannot change them. The
[`checkLibraries` and `checkPlugins`](/docs/configuration#definitions-of-packages-and-plugins)
fields of `lint` select packages and plugins to check.

## Reported

```tsx
style("w-[1/2]");
```

> incompatible-property-value: `width` does not accept `1/2`
> 
> Example:1:10

## Fixed

```tsx
style("w-1/2");
```

## How to fix

- Use the form of the utility that the theme defines, such as the fraction form
  `w-1/2`, as in the example.
- In an arbitrary value, write a valid CSS value, such as `w-[50%]`.

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/incompatible-property-value/index.mdx