Aprende a controlar ancho, alto, padding y márgenes para construir bloques limpios y consistentes con Tailwind.
Cuando un diseño se ve desordenado, casi siempre el problema está en espaciado y dimensiones.
Tailwind te permite fijar ritmo visual usando escalas consistentes: p-4, p-6, gap-4, max-w-xl, etc.
La combinación de max-width y mx-auto evita que el contenido se estire demasiado en pantallas grandes.
En esta lección vas a construir un contenedor centrado y modular con spacing predecible.
Repetir una escala de spacing hace que el diseño respire y parezca del mismo sistema.
Usa p-6 para interior de tarjetas y gap-4 para separar elementos hermanos.
Evita mezclar valores al azar en cada bloque: rompe consistencia y complica mantenimiento.
Con mt-2, mt-4, mt-6 puedes construir jerarquía vertical sin CSS extra.
No todo debe ocupar full width: limita ancho para mejorar legibilidad.
Utiliza min-h-screen para secciones de entrada o pantallas completas.
h-full depende de la altura del padre, por eso no siempre da el resultado esperado.
min-h-screen es una base sólida para hero sections o layouts de dashboard.
Combínalo con grid place-items-center para centrar contenido de forma robusta.
Aprende a controlar ancho, alto, padding y márgenes para construir bloques limpios y consistentes con Tailwind.
Código del tema: Utilidades composables + responsive
Repetir una escala de spacing hace que el diseño respire y parezca del mismo sistema.
Usa p-6 para interior de tarjetas y gap-4 para separar elementos hermanos.
Evita mezclar valores al azar en cada bloque: rompe consistencia y complica mantenimiento.
Con mt-2, mt-4, mt-6 puedes construir jerarquía vertical sin CSS extra.
No todo debe ocupar full width: limita ancho para mejorar legibilidad.
<section class="mx-auto w-full max-w-3xl p-6">
<article class="rounded-xl bg-slate-900 p-6 text-slate-100">Contenido</article>
</section>Utiliza min-h-screen para secciones de entrada o pantallas completas.
h-full depende de la altura del padre, por eso no siempre da el resultado esperado.
min-h-screen es una base sólida para hero sections o layouts de dashboard.
Combínalo con grid place-items-center para centrar contenido de forma robusta.