Logical Direction

Use logical start and end instead of physical left and right in CSS. This applies to properties, values, and directional utility classes, including utilities used through @apply.

Philosophy

Left and right describe fixed physical sides. Start and end follow the writing direction, so the same styles work in both LTR and RTL layouts.

Correct

.card {
    margin-inline-start: 1rem;
    padding-inline-end: 1rem;
    text-align: start;
}
.action {
    inset-inline-end: 0;
}

Incorrect

.card {
    margin-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}
.action {
    right: 0;
}

Fix

Replace physical left and right with the corresponding logical inline-start and inline-end properties, values, or utilities. Verify the result in both LTR and RTL.