Domina el espaciado y el diseño de cajas en Tailwind con una estrategia clara: usa utilidades simples para controlar margin, padding, bordes, esquinas y sombras mientras validas resultados al instante en el Playground. Aquí tienes una guía práctica, directa y lista para aplicar en tus diseños.
¿Cómo controlar el espaciado con Tailwind CSS?
Comprender el espaciado es esencial: con la clase m- controlas el espacio externo (margin) y con p- el espacio interno (padding). Ambos definen cómo "respira" tu contenido dentro y fuera de una caja.
m-4 agrega margen externo predefinido al elemento.
p-6 agrega padding interno y separa el texto del borde.
bg-blue-200 permite ver claramente el background y distinguir margin vs padding.
Ejemplo base de caja con espaciado y color:
<divclass="m-4 p-6 bg-blue-200"> Caja con margin y padding.
</div>
¿Qué significa la escala 4, 6 o 10 en m y p?
La escala de Tailwind está basada por defecto en múltiplos de cuatro. Así, los valores como 4 o 6 son parte de una escala de espaciado predefinida que puedes personalizar si lo necesitas. También hay equivalencias útiles:
m-0: sin margen.
m-1: 0.25rem.
m-2: 0.5rem.
… hasta m-32: 8rem (128px).
Estos mismos valores se aplican a padding con p-, y a otras utilidades que aceptan la escala.
¿Cómo visualizar la diferencia entre margin y padding?
El margin separa el elemento del resto; el padding separa el contenido del borde. Al combinar m-4 y p-6 con un color de fondo, verás ambas capas con claridad.
margin: separación externa del contenedor.
padding: separación interna del texto respecto al borde.
Usar bg-… resalta la caja y facilita el control visual.
¿Cómo personalizar márgenes por dirección?
Cuando necesitas detalle, aplica márgenes por lado. Usa mt- para arriba, mb- para abajo, ml- para izquierda y mr- para derecha. Si buscas simetría, mx- controla horizontal y my- vertical.
mt-4: margen superior.
mb-6: margen inferior mayor.
ml-2 y mr-10: izquierda corta y derecha amplia.
mx-4 y my-4: espaciados simétricos horizontal y vertical.
Ejemplos de dirección y ejes:
<!-- Lados específicos --><divclass="mt-4 mb-6 ml-2 mr-10 p-4 bg-blue-200"> Márgenes personalizados por lado.
</div><!-- Ejes horizontal y vertical --><divclass="mx-4 my-4 p-4 bg-blue-200"> Espaciado simétrico en ejes.
</div>
¿Cómo diseñar cajas con borde, esquinas y sombra?
El diseño de cajas combina border, esquinas redondeadas y shadow. Primero define el borde con grosor y color; luego ajusta radios y sombras según la presencia que quieras lograr.
border-4: grosor de borde con escala predefinida.
border-red-500: color dentro de una paleta del 50 al 950.
p-4: añade interior para que el borde tenga sentido visual.
mt-8: separa la caja del elemento superior.
Ejemplo con borde y espaciado:
<divclass="border-4 border-red-500 p-4 mt-8"> Caja con borde rojo y padding.
</div>
¿Cómo redondear las esquinas con precisión?
Activa esquinas redondeadas con utilidades de rounded en una escala que va de algo sutil a extra large. Úsala junto a background para apreciar mejor el contorno.
<divclass="border p-4 rounded-xl bg-gray-200"> Esquinas redondeadas en escala extra large.
</div>
rounded: activa redondeo sutil.
rounded-xl: presencia marcada en las esquinas.
Combínalo con bg-… para percibir el cambio.
¿Cómo aplicar sombras que aporten presencia?
Las sombras con shadow también siguen una clasificación (por ejemplo, de sutil a 2XL) y ayudan a destacar la caja sobre el fondo.
<divclass="p-4 rounded-xl shadow-2xl bg-blue-100"> Caja con sombra intensa 2XL.
</div>
shadow-md: sombra media apenas perceptible.
shadow-2xl: sombra más robusta y visible.
Ajusta color y borde para un equilibrio visual.
¿Te animas al reto final? Construye una caja combinando espaciado, borde, esquinas y sombra con utilidades de Tailwind. Comparte tu código y un screenshot para ver el resultado.
