Das bordas CSS para Tailwind
border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
No Tailwind uma borda vive em duas partes: border define a espessura e um utilitário próprio define a cor. O raio é direto, com border-radius: 0.5rem a corresponder a rounded-lg. O cuidado maior está no foco, porque os anéis do Tailwind substituem o contorno do browser e perder esse sinal prejudica quem navega pelo teclado.
Largura, estilo e cor
border: 1px solid #e5e7eb costuma ser border border-gray-200. Separe lados se o CSS não for uniforme.
Raios
0.5rem → rounded-lg. Raios de marca raros → rounded-[…].
Outline de foco
Após converter, reveja focus-visible: muitas regressões a11y vivem na borda de foco.
Experimentar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confiança: verifique o resultado visualmente. O conversor é um rascunho para developers.