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 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 fields of lint select packages and plugins to check.

Reported

style("w-[1/2]");incompatible-property-value: `width` does not accept `1/2`

Fixed

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