Skip to content

prefer-logical-tailwind-utilities

Prefer logical Tailwind utilities in explicitly opted-in bidirectional interfaces.

Why

Physical spacing and alignment remain on the same side when reading direction changes, producing incorrectly mirrored interfaces.

Fix

Use the suggested logical utility; retain intentional physical geometry through allowUtilities or a scoped rule override.

Examples

Before — flagged Mirror layout spacing
src/layout.tsx
<div className="ml-2" />;
After — preferred Use direction-aware spacing
src/layout.tsx
<div className="ms-2" />;

Options

{
"additionalProperties": false,
"properties": {
"allowUtilities": {
"items": { "type": "string" },
"type": "array",
"uniqueItems": true
},
"checkInsets": { "type": "boolean" },
"enabled": { "type": "boolean" }
},
"type": "object"
}