Quem já está no mundo da programação há algum tempo se acostumou a escrever margin-left, padding-right e rounded-l quase no automático. Virou muscle memory de qualquer dev e a maioria das pessoas ainda escreve CSS assim:

margin-left: 16px;
padding-right: 8px;
border-top-left-radius: 6px;

Ou, no Tailwind:

rounded-l-sm
border-r-0
ml-4

Funciona. Sempre funcionou!

Mas existem situações em que isso deixa de ser só detalhe e começa a virar problema. Ou melhor: momentos em que isso exige um pouco mais de atenção da nossa parte.

A parte curiosa? O CSS moderno já resolve isso há anos. A solução está ali, pronta. Só que quase ninguém usa, e muita gente nem sabe que existe.

O problema

O left e right são propriedades físicas. Elas não sabem nada sobre direção de layout.

Quando você muda o dir=”rtl”, o conteúdo vira, mas o left continua sendo esquerda física da tela.

Resultado?
• Bordas quebradas
• Cantos arredondados errados
• Botões que deixam de parecer “parte do mesmo bloco”
• Layout visualmente desalinhado

Não é difícil encontrar casos em que um simples rounded-l ou rounded-r acaba quebrando o visual quando o layout muda de direção.

A solução: propriedades lógicas

CSS moderno tem propriedades lógicas, que respeitam a direção do documento.

margin-inline-start
padding-inline-end
border-start-start-radius

Essas propriedades se adaptam automaticamente:

• Em LTR → start = esquerda
• Em RTL → start = direita

Você escreve uma vez. Funciona nos dois!

Já no Tailwind você usa:

rounded-s-sm
rounded-e-sm
border-e-0
ms-4

Simples assim!

Não é só sobre RTL

Mesmo que hoje seu produto não suporte RTL:

• Isso é mais robusto.
• Evita bugs futuros.
• Deixa seu código semanticamente correto.
• Torna seu design system preparado para internacionalização.

É tipo usar rem em vez de px. Você pode ignorar…até o dia que precisa.

Regra prática

Se você está falando de direção horizontal no layout, use:
• start / end
• inline-start / inline-end
• rounded-s / rounded-e
• border-s / border-e

Deixe left e right para casos realmente físicos (posicionamento absoluto muito específico, por exemplo).

CSS evoluiu. A maioria só ainda não mudou o hábito.