---
title: "prefer-logical-properties"
description: "Reports a physical property that has a logical form, such as ml-4 for ms-4."
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.

# prefer-logical-properties

This rule reports a utility for a physical property that has a logical form, such
as `ml-4` (left) for `ms-4` (start). A logical property follows the writing
direction, so the layout also works in right-to-left languages. The `stylistic`
preset enables this rule.

## Reported

```tsx
style("ml-4");
```

> prefer-logical-properties: prefer a logical declaration for `margin-left: calc(var(--spacing) * 4)`
> 
> Example:1:8

## Fixed

```tsx
style("ms-4");
```

## How to fix

- If the margin separates the element from the content before it, use the
  logical form, as in the example.
- If the side must stay on the left in every language, such as for an icon that
  points left, keep the physical form and add a
  [suppression comment](/docs/configuration#suppression-comments).
- For `overflow-x-*`, `overflow-y-*`, `overscroll-x-*`, `overscroll-y-*`, and
  `divide-y-*`, import
  the matching [logical stylesheet](/docs/concepts/stylesheets#logical-axis-utilities).
  These utilities then keep their names and write logical properties.

## Shorthands

A shorthand that gives every side the same value does not depend on the writing
direction, so this rule does not report `p-4` or `overflow-hidden`.

The rule reports a shorthand with different values for its sides, such as
`[padding:1rem_2rem]`. It also reports a shorthand that sets only some sides, such
as `[border-top:var(--border)]`, for every value.

The rule does not report a single variable in a shorthand for all sides, such as
`[padding:var(--gap)]`, because the compiler cannot determine which values the
variable holds. With a second value, as in `[padding:var(--gap)_1rem]`, the two
values differ, so the rule reports the shorthand.

## Rule settings

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

| Option | Default |
| --- | --- |
| `checkImplementation` | `false` |

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

Source: https://stillwind.dev/docs/lints/prefer-logical-properties/index.mdx