El espaciado y el diseño de cajas en Tailwind CSS son la base para construir interfaces equilibradas y visualmente claras. Si estás aprendiendo desarrollo web, dominar las clases de utilidad para margin, padding, bordes, sombras y esquinas redondeadas te permitirá componer diseños profesionales sin escribir CSS personalizado.

Vamos a recorrer cómo funcionan estas propiedades dentro del playground de Tailwind, qué significan los valores numéricos y cómo combinarlas para crear cajas con presencia.

¿Cómo se controla el espaciado en Tailwind con margin y padding?

En Tailwind, el espaciado se divide en dos conceptos clave: el espacio externo de un elemento y el espacio interno. La letra m representa el margin, que controla la separación entre un elemento y los que lo rodean. La letra p representa el padding, que controla la distancia entre el contenido y los bordes de la caja [01:05].

Un ejemplo básico se ve así:

• m-4 aplica un margen externo con valor 4 de la escala.
• p-6 aplica un padding interno con valor 6.
• bg-blue-200 agrega un color de fondo para visualizar la caja.

Al combinar estas tres clases, notas la diferencia entre el margen, que separa la caja del contenedor, y el padding, que aleja el texto de los bordes internos.

¿Qué significan los números en clases como m-4 o p-6? Hacen referencia a la escala de espaciado predefinida de Tailwind, basada en múltiplos de 4. Por ejemplo, m-1 equivale a 0.25rem, m-2 a 0.5rem, y la escala llega hasta m-32, que son 8rem o 128 píxeles.

Esta escala es personalizable según las necesidades de tu proyecto, lo que te da flexibilidad para definir tu propio sistema de diseño.

¿Cómo aplicar márgenes en lados específicos?

No siempre quieres el mismo valor en los cuatro lados. Tailwind ofrece variantes para personalizar cada dirección de forma individual [03:25].

Las más usadas son:

• mt-4 para margen superior (top).
• mb-6 para margen inferior (bottom).
• ml-2 para margen izquierdo (left).
• mr-10 para margen derecho (right).

También puedes trabajar el espaciado por ejes, lo que ahorra clases cuando dos lados comparten valor. Con mx-4 aplicas margen horizontal en izquierda y derecha al mismo tiempo, mientras que my-4 aplica margen vertical arriba y abajo. Esta lógica funciona igual para padding: px-4, py-2, etc.

¿Cómo se diseñan cajas con bordes, sombras y esquinas redondeadas?

Una vez controlas el espaciado, el siguiente paso es darle estilo a la caja con bordes, esquinas redondeadas y sombras. Estos detalles aportan personalidad al diseño y son clave cuando construyes componentes reutilizables [05:40].

¿Cómo se agregan bordes y colores con Tailwind?

Los bordes siguen la misma lógica de las clases de utilidad. Empiezas con border-4 para definir el grosor y luego asignas un color con border-red-500, donde la paleta va desde 50 hasta 950 para controlar tonalidades.

Un ejemplo combinado quedaría así:

• border-4 define el grosor del borde.
• border-red-500 asigna color rojo intermedio.
• p-4 agrega padding interno.
• mt-8 separa la caja del elemento superior.

Aquí empiezas a mezclar varias clases de utilidad para componer un diseño completo sin salir del HTML.

¿Cómo redondear las esquinas de una caja?

Las esquinas redondeadas se aplican con la clase rounded, que tiene una escala propia: rounded-sm, rounded-md, rounded-lg, rounded-xl y más [07:50]. Cada nivel aumenta el radio de curvatura.

Por ejemplo, rounded-xl aplica un redondeado notable que suaviza la apariencia de la caja, ideal para cards o botones modernos.

¿Cuál es la diferencia entre rounded-sm y rounded-xl? rounded-sm aplica un redondeado mínimo, casi imperceptible, mientras que rounded-xl genera curvas amplias y visibles. La escala intermedia incluye medium y large para ajustar al gusto.

¿Cómo agregar sombras a un elemento?

Las sombras se aplican con la clase shadow y siguen la misma escala visual. Tienes opciones como shadow-sm, shadow-md, shadow-lg y shadow-2xl para sombras más pronunciadas [09:20].

Al combinar shadow-2xl con un fondo claro, un borde delgado y esquinas redondeadas, la caja gana profundidad y se separa visualmente del resto del diseño. Este tipo de combinaciones es lo que distingue una interfaz funcional de una con verdadera presencia visual.

Reto práctico para aplicar lo aprendido

Ahora que conoces las clases de utilidad para espaciado y diseño de cajas, te propongo un reto: analiza el recurso visual que acompaña esta lección y reconstruye el diseño usando solo las clases que viste aquí. Combina margin, padding, bordes, color, redondeados y sombras hasta lograr el resultado.

Comparte tu código y un screenshot de cómo te quedó en los comentarios. ¿Qué combinación de clases usaste para darle presencia a tu caja?