Dimensiones y Espacios

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:57

Dimensiones y Espacios

Curso de Tailwind CSS 1

Clase 8 de 29

Clase 8 / 29

Recursos

¿Qué es el sistema de espaciado en Tailwind?

El poderoso framework Tailwind CSS proporciona un sistema de espaciado ampliamente configurable. A través de él, puedes gestionar las dimensiones y el espaciado de tus elementos web de manera precisa. Este sistema es altamente flexible y se puede modificar según las necesidades de diseño y desarrollo. Tailwind parte de una definición predeterminada de unidades, que abarca desde cero hasta valores mayores, cada uno con su función especial.

¿Cómo funcionan las unidades de espaciado?

Las unidades en Tailwind comienzan desde cero, sin espaciado, y se utilizan palabras como SPX para representar un píxel. De esta manera, se pueden implementar múltiples unidades, desde cero hasta seis, dentro de Tailwind, manejando distintas escalas predefinidas. Aquí está lo fascinante: cuatro unidades equivalen a un rem, que a su vez equivale a seis píxeles. Así, Tailwind da saltos de manera incremental en su espaciado: seis, ocho, diez, doce, dieciséis, veinte, y veinticuatro.

El sistema espaciado no solo es útil, sino que será tus ojos y manos a lo largo de cualquier proyecto que utilices este framework.

/* Ejemplo de clases de Tailwind CSS para espaciado */
.h-16 { height: 4rem; }
.w-32 { width: 8rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

¿Dónde se aplica el espaciado?

El espaciado en Tailwind es aplicable en distintas propiedades CSS, lo que permite manejar la altura (height), el ancho (width), los márgenes (margin) y el relleno (padding), adaptando estos atributos de manera eficiente y flexible según el diseño buscado.

¿Cómo ajustar altura y ancho?

Para ajustar las dimensiones de los elementos, utilizamos clases específicas. Por ejemplo, una clase h-8 modifica la altura de un elemento a ocho unidades, o dieciséis unidades si usamos h-16. Del mismo modo, para el ancho (width), podemos usar w-16 y w-32, consiguiendo finalmente elementos cuadrados si se usa la misma unidad en ambas direcciones.

Además, Tailwind te permite modificar el ancho mediante porcentajes, utilizando fracciones. Este método es extraordinariamente útil cuando se desea que los elementos se adapten a diferentes contextos de tamaño.

/* Ejemplo de manejo del ancho con fracciones */
.w-1/2 { width: 50%; }
.w-1/3 { width: 33.333333%; }
.w-1/4 { width: 25%; }

¿Qué son Margin y Padding y cómo se utilizan?

Los márgenes (margin) y los rellenos (padding) manejan el espacio tanto dentro como fuera de un elemento, respectivamente. Con Tailwind, puedes modificarlos de forma uniforme o en direcciones específicas. Por ejemplo:

m-t4 aumenta el margen superior en cuatro unidades.
p-l4 incrementa el relleno a la izquierda con cuatro unidades.

Es una manera poderosa de optimizar tus diseños manteniendo un control detallado sobre la distribución del espacio.

/* Ejemplo de clases CSS para márgenes y rellenos */
.mt-8 { margin-top: 2rem; }
.ml-8 { margin-left: 2rem; }
.p-4 { padding: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

¿Cómo usar espaciado en el eje horizontal y vertical?

Tailwind proporciona funcionalidad avanzada para aplicar espacios en ejes específicos. Utilizando las clases m-x-auto en el eje horizontal o p-y-2 en el eje vertical, puedes ajustar el espacio dependiendo de tus necesidades. Esta ventaja es particularmente útil cuando se busca centrar elementos o proporcionar un mismo espaciado a lo largo del eje x o y.

/* Ejemplo de control de espaciado en los ejes */
.mx-auto { margin-left: auto; margin-right: auto; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

Este conocimiento sobre dimensiones y espaciado será un pilar para tu eficiencia en el diseño utilizando Tailwind. Aprovecha estas herramientas y da un paso audaz hacia el dominio de un diseño consistentemente limpio y estructurado. ¡Anímate a seguir aprendiendo y a experimentar con Tailwind CSS para desarrollar proyectos increíbles!

Luis Rafael Viñas Gómez

Hace 6 años

Tengo un problema cuando quiero aplicar en un tema un estilo de boxShadow diferente llamado soft... mi configuracion es la siguiente:

module.exports = {
  theme: {
    boxShadow: {
      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
      soft: '0 9px 9px 16px rgba(163, 177, 198, 1), 0 -9 -9 16 rgba(163, 177, 198, 1)',
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
      none: 'none',
    },
  },
  variants: {},
  plugins: [],
}```

Al colocarle la clase shadow-soft el elemento no cambia...

Guido Choque Huaccanqui

Hace 6 años

Hola Luis, ¿Haz revisado que en tu hoja de estilos este creandose esa clase?. En la clase el profesor creo 'style.css'. Si en caso no se esta generando tu clase '.shadow-soft' en tu archifo de estilos, es probable que no estes pasandole el archivo de configuración tailwind personalizado a tu archivo 'postcss.config.js'. El profesor estaba usando los parámetros por defecto del tailwind. Si en caso deseas agregar tus propios parámetros, debes editar el archivo que menciones antes. Como indica en la documentación de tailwind:

Ejemplo mi caso:

Luego de agregar esos cambios, deberás correr nuevamente el comando 'npm run build' dentro de tu proyecto como en el ejemplo del profesor, para que se genere tu hoja de estilos con los cambios. Como en la siguiente pantalla:

Espero te sirva también, suerte!.

Comentarios (32)32 comentarios

Kevin Parra Lopez

Luis Alejandro Vera Hernandez

Hace 5 años

Jorge Alejandro Niglia

Diego Alfonso Najera Ortiz

Jimmy Buriticá Londoño

Leonardo Gomez

Juan Salinas

Alejandro Ruiz

Fernando Andres Muñoz Suazo

Stiven Jiménez

Guillermo Baldán López

Daniel Esteban Santos Mendez

Jefferson Andres Espejo Goez

Camilo Alexander Velandia Velandia

Saul Florez

Francy Dayana Rodríguez

Lucas Frezzini

Gonzalo Pimentel

Jose Morales Varon

Bernardo Ayala Montezuma

Sneyder Barreto

Javier Romero

Leonardo de los angeles Espinoza Hernandez

David Alejandro García Graterón

Favio Sauto

Victor Yoalli Dominguez

Profesor

Ruben Garcia

Hector Luis Piñero

Karen Michel Sixto Lázaro

Erick HL

John Steven Bernal Gonzalez

Introducción, instalación y ambiente de desarrollo

¿Qué es Tailwind CSS?

Instalación y ambiente de desarrollo

Directivas de Tailwind

Conceptos básicos

Personalización y configuración

Responsive Design, Mobile First y Utility First

Utilerías

Colores

Cómo crear grids o columnas en Tailwind CSS

Dimensiones y Espacios

Cambiando las propiedades de la tipografía

Ajustando el espaciado entre letras y líneas

Display

Flexbox

Crea tus propias utilerías

Entendiendo las variantes y las pseudo-clases

¡Es hora de practicar!

Proyecto: PlatziFood

Creando una card

Aplicando formato a la card

Responsive design en la card

Construye el header

Crea el footer

Crea un banner

Cómo integrar una card

Forms

Directivas de Apply

Extraer componentes

Navbar

Alpine JS

Optimiza tu archivo: PurgeCSS y NanoCSS

Conclusiones

Conclusiones y qué sigue

Dimensiones y Espacios