De los bordes CSS a Tailwind
border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
Los bordes se dividen en dos piezas al pasar a Tailwind: border establece el grosor y una utilidad aparte define el color. El radio es directo, con border-radius: 0.5rem convertido en rounded-lg. El punto delicado son los estados de foco, porque Tailwind usa anillos propios y perder ese indicador afecta de inmediato a la accesibilidad.
Ancho, estilo y color
border: 1px solid #e5e7eb suele ser border border-gray-200. Separa lados si el CSS no es uniforme.
Radios
0.5rem → rounded-lg. Radios de marca raros → rounded-[…].
Outline de foco
Tras convertir, revisa focus-visible: muchas regresiones a11y viven en el borde de foco.
Probar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.