TS · correctness

←Previous Next→

prefer-logical-tailwind-utilities

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

physicalUtility Rule source Tests Catalog JSON

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": {
      "description": "Physical utility names allowed without a logical replacement.",
      "items": { "type": "string" },
      "type": "array",
      "uniqueItems": true
    },
    "checkInsets": {
      "description": "Include physical inset utilities in direction checks.",
      "type": "boolean"
    },
    "enabled": {
      "description": "Enable replacement of physical direction utilities with logical equivalents.",
      "type": "boolean"
    }
  },
  "type": "object"
}