Skip to content

clamped-value

Reports a value outside the range that the browser uses, such as opacity above 1.

This rule reports a literal value outside the range that the browser uses for the property. The browser clamps the value to the range, so the extra amount has no effect. For example, opacity-150 behaves the same as opacity-100.

Reported

style("opacity-150");clamped-value: browsers clamp `opacity: calc(150 * 1%)` to `opacity: 100%`

Fixed

style("opacity-100");

How to fix

Use the end of the range that the value reaches, as in the example, or a value inside the range.

The rule checks values written in the code. It does not check values that a custom property receives at runtime.

Rule settings

PresetSeverity
recommendedwarn
strictdeny
stylisticoff

Configure lint to change the severity or options.