Tailwind

Espaciado y tamaños con Tailwind

Bruno Gabryell Cabral da Silva

3 de nov. de 2023 • 7 min read

Hay detalles en la vida que son fundamentales para que podamos realizar determinadas actividades a lo largo de ella. Tener una idea del espacio para aparcar un coche sin chocar con el de al lado, saber cuánto tiempo se tarda en llegar de casa al trabajo sin que sea tarde, calcular cuánto dinero aún se puede gastar para llegar a final del mes...

Todo ello es tan natural que se diluye en nuestro día a día, aunque tiene su debida importancia. En el mundo de la programación no podría ser diferente: necesitamos tener ciertas nociones muy bien fijadas en la mente para que se vuelvan tan naturales como realizar cualquiera de estas actividades mencionadas.

En el artículo de hoy aprenderemos a utilizar las clases de Tailwind para trabajar con conceptos muy presentes y normales en el día a día de quienes diseñan con CSS: tamaños y espaciado.

¿Qué es Tailwind CSS?

Tailwind es un framework creado con el objetivo de optimizar el uso de CSS. En lugar de que el estilo se realice a través de clases creadas manualmente por el programador (donde sus atributos se definen en un archivo importado con una extensión .css), este marco proporciona un conjunto de clases diseñadas en el modelo CSS atómico, donde cada clase tiene una única función, como por ejemplo, aplicar el color rojo al fondo de un elemento o poner su texto en cursiva. Todo este conjunto de clases puede hallarse en la documentación de Tailwind CSS e, incluso si ninguno de ellos satisface tus necesidades, ¡también puedes crear uno nuevo que sí lo haga!

Centrado en el desarrollo móvil, todo el proceso de diseño se acelera y optimiza con Tailwind CSS que, además de ser intuitivo, tiene documentación fácil de aprender y rápida de buscar: simplemente ingresa el nombre del atributo (como como object-fit, margin o display) que proporciona el nombre de la clase que satisface la demanda y cómo utilizarla.

Consejos para utilizar Tailwind CSS

Hay varias formas de instalar Tailwind CSS en su proyecto, según la tecnología que esté utilizando. En la documentación de este framework existe una guía práctica para cada escenario donde se puede utilizar. ¡Simplemente sigue el paso a paso específico que se adapte a tu situación y sé feliz!

Figura 1 - Guía de instalación de Tailwind CSS en su documentación.

💡

Nota: La forma más rápida de implementar Tailwind es insertando eñ CDN disponible mediante la documentación. Solo se requiere añadirlo al head de tu documento HTML y deja que él haga toda la magia. También es importante resaltar que los ejemplos que usaremos en este artículo serán de un proyecto desarrollado con React.js. Sin embargo, no te preocupes, ya que todo el conocimiento compartido aquí se puede aplicar en cualquier otro escenario en el que se pueda utilizar Tailwind CSS.

Por lo tanto, no se sorprenda si el nombre de la propiedad de clase en un elemento es className en lugar de class: ambos tienen el mismo objetivo, pero en React, por convención, se usa el primero. Dicho esto, ¿seguimos adelante?

Creando un proyecto en la práctica

Ha llegado el momento de desarrollar una aplicación donde podamos trabajar con espacios y tamaños usando Tailwind CSS. Ve el siguiente código:

Figura 2 - Creando uma aplicación en la práctica.

En el ejemplo de la Figura 2, creamos un contenedor principal que tiene la clase flex. Esta clase hará que la característica de cada contenedor interno cambie de block para inline, para que queden organizados uno al lado del otro, en lugar de uno debajo del otro. Además, cada contenedor interno tiene, además de un valor en su interior, clases que cambian los colores del background para rojo, verde, amarillo y azul (bg-red-600, bg-green-600, bg-yellow-500 e bg-blue-500, respectivamente).

Si ejecutas este código, verás que no hay mucho que mostrar aparte de números envueltos en pequeños bloques de colores. Todo esto está a punto de cambiar en un momento, si estás dispuesto a quedarte con nosotros en este viaje.

Figura 3 - Execución del código de la Figura 2.

Espaciado en Tailwind CSS

Cuando hablamos de espaciado en el estilo CSS, nos referimos a atributos que son capaces de “alejar” elementos entre sí o distanciar los límites de los elementos en relación a tu contenido. Dividimos este concepto en dos atributos principales: Padding y Margin.

Padding

Este atributo se encarga de definir un espaciado interno para un elemento, de manera que sea posible darle más espacio en su interior, generando una especie de borde invisible. En Tailwind existen una serie de clases que realizan esta función, todas ellas comenzando con la letra “p”, seguida de la especificación deseada para el espaciado. Intentemos usar la clase p-10 en todos los contenedores internos de nuestro proyecto y notemos la sorprendente diferencia que tendremos a continuación:

Figura 4 - Añadiendo un espaciado interno en los contenedores internos.

Figura 5 - Ejecución del código de la Figura 4.

¿Notaste la diferencia? En este caso, aplicamos un espaciado uniforme a las cuatro direcciones del contenedor, pero podemos aplicar tamaños específicos a cada dirección:

pl-10 - crea un espacio interno solo para el lado izquierdo del contenedor (padding-left);
pr-10 - define un espacio interno solo para el lado derecho del contenedor (padding-right);
pt-10 - produce un espacio interno para la parte superior (o superior) del contenedor (padding-top);
pb-10 - aplica espacio interno al fondo del contenedor (padding-bottom);
px-10 - crea un espacio interno solo para el eje horizontal del contenedor (padding-left e padding-right);
py-10 - establece un espacio interno solo para el eje vertical del contenedor (padding-top e padding-bottom).

💡

Nota: El número 10 ejemplificado en los temas anteriores hace referencia al tamaño que podemos elegir según nuestras necesidades. Para ver todos los tamaños disponibles para el espaciado interno, consulta la documentação de Tailwind CSS.

Margin

El atributo Margin do Tailwind sigue la misma lógica de las líneas de clases responsables por el padding, solo para espaciado externo. Insertemos la clase m-5 en nuestros contenedores internos y veamos el resultado que se obtendrá:

Figura 6 - Añadiendo un espaciado externo para los contenedores.

Figura 7 - Contenedores separados unos de los otros por medio de la clase **m-5**.

Ahora, para todas las direcciones, hay una especie de borde exterior que aleja los elementos entre sí. De la forma en que lo hicimos, se creó un espacio externo uniforme para todas las direcciones del elemento, pero al igual que el padding, también tenemos muchos conjuntos de clases personalizados para el margin:

ml-5 - crea un espacio exterior solo para el lado izquierdo del contenedor (margin-left);
mr-5 - define un espacio exterior sólo para el lado derecho del contenedor (margin-right);
mt-5 - produce un espacio exterior para la parte superior (o superior) del contenedor (margin-top);
mb-5 - aplica un espacio exterior al fondo del contenedor (margin-bottom);
mx-5 - crea un espacio exterior sólo para el eje horizontal del contenedor (padding-left e margin-right);
my-5 - establece un espacio exterior sólo para el eje vertical del contenedor (padding-bottom e margin-bottom).

💡

Nota: El número 5 que usamos como ejemplo en los temas mencionados anteriormente se refiere al tamaño que podemos elegir según las necesidades del proyecto. Para ver todos los tamaños disponibles para el espaciado externo, consulta la documentación de Tailwind CSS.

Tamaños en Tailwind CSS

Mientras que los espaciados Padding y Margin define algo así como "bordes invisibles" para el elemento, los tamaños definen qué tan grandes pueden ser los elementos y cuánto de la pantalla pueden ocupar, en términos de ancho (width) e altura (height).

Width y Height

Mientras el atributo width define el ancho de un elemento, con el atributo height podemos definir la altura del mismo, transmitiendo especificaciones precisas que agregarán elegancia a la aplicación con la combinación de los dos. Tailwind nos proporciona categorías de clases para manipularlas, siendo las principales:

Números - En la documentación de Tailwind CSS es posible encontrar varias clases con numerales que definen un tamaño fijo para un elemento (por ejemplo, w-10 o h-10 definen un ancho o alto de 40 px, respectivamente);
Fracciones - Pensando en la recursividad, es posible definir qué porcentaje de espacio puede tener un elemento, tanto para alto como para ancho (por ejemplo, w-1/2 y h-1/2 definir que un elemento tendrá un ancho y alto igual a la mitad del tamaño disponible);
Screen y Full - Las clases w-screen y h-screen definen que el ancho y alto del contenedor serán el 100% del alto del viewport (es decir, 100% de la pantalla disponible para visualización), mientras que las clases w-full y h-full definen que el ancho y alto del contenedor serán el 100 % del tamaño disponible.

💡

Nota: Así como existen los atributos min-width, min-height, max-width y max-height en CSS, Tailwind CSS también nos proporciona clases que podemos usar para establecer un tamaño máximo y mínimo para un elemento. La terminología es la misma que se utiliza para width o height, ya sea para números, fracciones y otras posibles definiciones presentes en la documentación (min-width-10, o max-height-full, por ejemplo).

Consideraciones finales

Como ves, Tailwind CSS nos hace la vida mucho más fácil, proporcionándonos varias herramientas para que podamos trabajar con todos los atributos que tiene CSS con la menor complejidad posible, sin diferencia de espacios y tamaños.

Quiero saber qué te pareció este artículo y cuánto te ayudó. Si deseas realizar alguna consulta o simplemente quieres intercambiar alguna idea sobre éstos y otros temas de otra manera, puedes contactarme a mi correo electrónico bruno.cabral.silva2018@gmail.com o en LinkedIn.

¡Hasta luego!

💡

Las opiniones y comentarios emitidos en este artículo son propiedad única de su autor y no necesariamente representan el punto de vista de Listopro.

Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.