enforce-logical

oxlint rule that rewrites physical Tailwind CSS utilities into logical, RTL-friendly ones, like ml-4 → ms-4 and pr-2 → pe-2, with an autofix.

At a glance

Autofix	Editor suggestions	Design system	Options
Yes	Yes	Optional — used when entryPoint is set	allowlist, direction, sizing, entryPoint

What this rule does

Rewrites physical-direction Tailwind utilities into their logical, writing-mode aware equivalents: ml-4 → ms-4, pr-2 → pe-2, left-0 → inset-s-0, rounded-tl-md → rounded-ss-md, and on the block axis mt-4 → mbs-4, top-0 → inset-bs-0, border-b → border-be. Logical utilities resolve to margin-inline-start / padding-block-end / … in CSS, so they follow the writing direction without any extra code: required if your app ships in Arabic, Hebrew, Farsi, or any other RTL language, and the block axis also follows a vertical writing mode. Autofix on the first offender per location, editor suggestion on subsequent ones.

Physical	Logical	Axis
ml / mr, pl / pr	ms / me, ps / pe	inline
scroll-ml / scroll-mr, scroll-pl / scroll-pr	scroll-ms / scroll-me, scroll-ps / scroll-pe	inline
left / right	inset-s / inset-e (start / end before 4.2)	inline
border-l / border-r	border-s / border-e	inline
rounded-l / rounded-r, rounded-tl / -tr / -bl / -br	rounded-s / rounded-e, rounded-ss / -se / -es / -ee	inline
float-, clear-, text- left / right	float-, clear-, text- start / end	inline
mt / mb, pt / pb	mbs / mbe, pbs / pbe	block
scroll-mt / scroll-mb, scroll-pt / scroll-pb	scroll-mbs / scroll-mbe, scroll-pbs / scroll-pbe	block
top / bottom	inset-bs / inset-be	block
border-t / border-b	border-bs / border-be	block
w, min-w, max-w	inline, min-inline, max-inline	inline, with sizing
h, min-h, max-h	block, min-block, max-block	block, with sizing
size	inline + block	both, with sizing

rounded-t-* / rounded-b-* have no block-axis counterpart (Tailwind has no rounded-bs), so they are left alone.

The table also covers the three utilities where the direction is the VALUE rather than part of the property: float-left → float-start (float: inline-start), clear-left → clear-start, and text-left → text-start (text-align: start). Miss those and a codebase can be "fully converted" and still float things to the left in RTL.

The block axis, logical sizing and inset-s-* / inset-e-* shipped in Tailwind 4.2. With a design system the rule checks that your Tailwind has them: on 4.1 it leaves the block axis alone and writes start-0 for left-0. Without settings.tailwindcss.entryPoint there is nothing to check against, so it writes start-0 and only suggests the block-axis rewrites, never autofixes them.

DS-independent in the sense that matters: the mapping table is static and the rule works without an entry point. When one IS configured, the rule also checks that the class it suggests exists — a project with its own @utility ml-huge used to be autofixed to ms-huge, which emits no CSS at all, so the fix applied and the margin silently disappeared.

enforce-logical and enforce-physical are sibling rules — they share a mapping table that one inverts. Enable only one at a time.

Options

direction

'inline' | 'block' | 'both', default 'both'.

Restricts conversion to one axis. 'inline' converts left and right (ml-*, left-*, border-r, float-left, …), the part that matters for RTL. 'block' converts top and bottom (mt-*, top-*, border-b, …), which only differ from their logical forms in a vertical writing mode. A codebase converted for RTL that never sets text vertically can keep 'inline'.

{ "tailwindcss/enforce-logical": ["error", { "direction": "inline" }] }

sizing

boolean, default false.

Also converts widths and heights: w-* → inline-*, h-* → block-*, their min- / max- forms, and size-* → inline-* block-*. Off by default: sizes are in nearly every class string, and a width equals an inline size in every horizontal writing mode, RTL included. It follows direction — w-* is inline, h-* block, and size-* needs both.

Some sizes have no logical counterpart and are left alone: a width in viewport heights (w-dvh) or a height in viewport widths (h-dvw), max-w-prose, and max-w-screen-*. With a design system a named value is converted only when the two classes declare the same thing: w-* reads --width-* first and inline-* only --container-*, so if your theme defines --width-xs, w-xs and inline-xs differ and w-xs stays as written.

{ "tailwindcss/enforce-logical": ["error", { "sizing": true }] }

allowlist

string[], default [].

Regex patterns (compiled lazily, invalid ones silently skipped). Classes whose full string matches any pattern bypass the rewrite. Use this for one-off cases where you genuinely want a physical direction — e.g. an icon that should always sit on the visual left regardless of writing direction.

{ "tailwindcss/enforce-logical": ["error", { "allowlist": ["^ml-icon$", "^rounded-tl-special$"] }] }

entryPoint

string, optional. A CSS entry point for this rule alone, overriding settings.tailwindcss.entryPoint. Only used to confirm that the class being suggested exists and that your Tailwind has the 4.2 utilities; the rule works without it.

Examples

✗ Incorrect

// Physical margins/padding
<div className="ml-4 pr-2" />
//              ~~~~ ~~~~  → ms-4 pe-2

// The direction as a VALUE
<div className="float-left clear-right text-left" />
//              ~~~~~~~~~~ ~~~~~~~~~~~ ~~~~~~~~~ → float-start clear-end text-start

// Positioning
<div className="left-0 right-0" />
//              ~~~~~~ ~~~~~~~  → inset-s-0 inset-e-0

// Borders and radii
<div className="border-l rounded-tl-md" />
//              ~~~~~~~~ ~~~~~~~~~~~~~  → border-s rounded-ss-md

// The block axis
<div className="mt-4 top-0 border-b" />
//              ~~~~ ~~~~~ ~~~~~~~~  → mbs-4 inset-bs-0 border-be

// options: { "sizing": true }
// Sizes
<div className="w-full h-screen size-4" />
//              ~~~~~~ ~~~~~~~~ ~~~~~~  → inline-full block-screen inline-4 block-4

✓ Correct

// Logical equivalents
<div className="ms-4 pe-2" />
<div className="inset-s-0 inset-e-0" />
<div className="border-s rounded-ss-md" />
<div className="mbs-4 inset-bs-0 border-be" />

// Already logical — variants and important round-trip cleanly
<div className="hover:ms-4 ps-(--gutter) me-4!" />

// options: { "direction": "inline" }
// Only the inline axis: the block axis is left as written
<div className="mt-4 top-0" />

Interactions with other rules

• enforce-physical: the inverse. They share the mapping table; enabling both at the same time will autofix in a loop. Pick one based on whether your app supports RTL (use enforce-logical) or is LTR-only (use enforce-physical).
• enforce-canonical: it agrees on the logical insets. On Tailwind 4.2+ this rule writes inset-s-2, the spelling the design system reports as canonical; start-2 (what it writes without a design system, or on 4.1) is rewritten to inset-s-2 by enforce-canonical. Same CSS either way, and enforce-physical converts both spellings back.
• enforce-shorthand: both rewrite pairs of sides. mt-2 mb-2 is a block-axis pair to this rule and my-2 to that one; enforce-shorthand also folds the logical pairs this rule writes (mbs-2 mbe-2 → my-2, inset-s-0 inset-e-0 → inset-x-0), so whichever fix lands first the string ends as my-2, which is already logical (margin-block). With sizing, w-4 h-4 ends as inline-4 block-4 either way: enforce-shorthand never folds that pair into size-4. The one combination that can end two ways is direction: 'inline' with sizing: w-4 h-4 becomes size-4 or inline-4 h-4 depending on which fix runs first.

When to disable it

• LTR-only applications where you're sure RTL will never be needed. Use enforce-physical instead if you want consistency in the other direction.
• Pixel-perfect layouts where physical direction is part of the design (rare, but happens with icons or decoration). Reach for allowlist before disabling globally.