Del espaciado CSS a Tailwind

padding: 1.5rem se convierte en p-6. Los atajos se expanden a utilidades laterales. Fuera de escala: p-[13px].

El espaciado suele ser lo primero que se convierte al pasar una hoja de estilos a Tailwind. Verás cómo padding: 1.5rem se traduce a p-6, cómo los atajos de cuatro valores se reparten en utilidades por lado y qué ocurre cuando la medida no cae en la escala. Esos casos terminan en valores arbitrarios como p-[13px] y conviene revisarlos.

Escala frente a rem sueltos

1.5rem suele ser p-6. 13px fuera de escala pide p-[13px] o un rediseño a token. No redondees a ciegas.

Shorthand que se abre

margin: 1rem 2rem puede volverse my-4 mx-8. Revisa cada lado antes del PR.

Espaciado en layout

gap-* en flex/grid evita márgenes huérfanos entre hijos.

Probar

Abrir conversor

.example { display: flex; gap: 1rem; padding: 1rem; }

Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.