---
title: "no-arbitrary-breakpoints"
description: "Reports viewport widths written as arbitrary values, such as min-[713px]:."
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.

# 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

```tsx
style("min-[713px]:p-4");
```

> no-arbitrary-breakpoints: variant `min-[713px]` uses an arbitrary breakpoint `(width >= 713px)`; use a named variant
> 
> Example:1:8

## Fixed

```tsx
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:

```css
@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()](/docs/macros/media).

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/no-arbitrary-breakpoints/index.mdx