no-arbitrary-breakpoints

This rule reports a viewport width written as an arbitrary value, such as min-[713px]:. The CSS works, but other components and JavaScript cannot refer to the same width by name. No preset enables this rule.

Reported

style("min-[713px]:p-4");no-arbitrary-breakpoints: variant `min-[713px]` uses an arbitrary breakpoint `(width >= 713px)`; use a named variant

Fixed

style("sidebar:p-4");

How to fix

Name the width in your theme after the layout change that it causes, and use the name as a variant, as in the example:

@theme {
  --breakpoint-sidebar: 713px;
}

If a default breakpoint such as md: fits the design, use it instead. To use the same width in JavaScript, pass the name to style.media().

Rule settings