Bordes y contornos con Tailwind

Estilizar la aplicación es un concepto muy importante en la vida de quienes se ocupan del desarrollo front-end en su vida diaria. Una buena estructura para tu sitio web es fundamental, pero si no agrada a quienes lo utilizan, no garantizará que ese usuario se vaya y busque una aplicación mejor y más bonita.

Bajo esta necesidad, sería casi imposible que no surgieran formas de lidiar con CSS que hicieran cada vez más fácil su uso y, hoy, aprenderemos dentro de Tailwind cómo usar bordes y contornos.

Un poco más sobre Tailwind CSS

Tailwind CSS es un framework creado por Adam Wathan con el objetivo, como ya se ha comentado, de hacer más práctica la interacción con CSS. Con esta herramienta, el estilo ya no se realiza a través de clases creadas en archivos separados (que a su vez tienen varios atributos) a clases que tienen una única funcionalidad, como hacer que el color de fondo de un elemento sea negro, o transformar el texto de un elemento en negrita. elemento. Esta forma de arquitectura de clases se llama Atomic CSS.

Antes de que empieces a imaginar que esto podría volverse demasiado complejo en lugar de facilitar la estilización, te invito a que eches un vistazo a la documentación de Tailwind CSS y sorprenderte de lo fácil que es encontrar exactamente cualquier implementación que quieras hacer en el estilo de tu página y aún más: lo práctico que es crear atributos, si no encuentras exactamente lo que quieres (aunque creo que es muy difícil para que eso suceda).

Si todo esto aún no te ha convencido, todo el proceso de estilo de Tailwind se centra en el concepto mobile-first y la recursividad dentro de esta herramienta es infinitamente más fácil que si lo hicieras con CSS puro: solo necesitas usar uniones entre las clases con palabras que representan ciertos tamaños de pantalla.

¡Tailwind CSS es para todos!

En la documentación de Tailwind CSS hay varias formas de instalarlo, dependiendo de la tecnología que estés utilizando y con cada una de las cuales la herramienta sea compatible (y hay muchas). Sigue el paso a paso haciendo clic en el botón Get started en la pantalla principal.

Bordes

La propiedad border de la interfaz CSS proporciona formas de estilo para los bordes alrededor de los elementos HTML, lo que permite elegir en qué lados existirá, qué forma tendrá el borde, color, grosor, etc. En consecuencia, y en línea con el modelo Atomic CSS, Tailwind tiene varias clases para este conjunto de propiedades relacionadas con border, que son las que veremos en este momento.

Utiliza la clase border para habilitar todas las funcionalidades relacionadas con el mismo. Siempre que no aplique ninguna otra clase de estilo de borde además de esta, se creará un borde sólido personalizado, como en el siguiente ejemplo:

Border Width

Border Width corresponde al tamaño o grosor que tendrá tu borde. La documentación proporciona varias posibilidades y mencionaré las principales estructuras de clases para aplicar pesos en Tailwind CSS:

• border-{tamaño} - Al crear una clase con esta estructura, asigna un grosor estándar a todas las imágenes, siendo “tamaño” uno de los tamaños disponibles por Tailwind;
  
• border-{lado}-{tamaño} - También es posible crear un espesor específico para un solo lado: sustituir “lado” por “l”(izquierda), “r”(derecha), “t”(arriba) o “b”(abajo), recordando que “ tamaño” también debe modificarse de forma análoga a la estructura anterior;
  
• border-{eje}-{tamaño} - Puedes diseñar dos lados a la vez (izquierdo y derecho reemplazando "eje" por "x", superior e inferior reemplazando "eje" por "y").
  

Para ilustrar, usaremos las tres formas en la aplicación de la Figura 1, reemplazando la clase border con las siguientes clases:

Border Color

Como sugiere su nombre, Border Color es responsable de cambiar el color de un borde. Para cambiar el color, podemos crear clases de manera análoga a las estructuras demostradas para Border Width, reemplazando “tamaño” con un color, como demostraremos a continuación:

Todas las imágenes que utilicé (así como todas las disponibles al usar Tailwind) se pueden encontrar en su documentación. Por lo tanto, no necesitas adivinar qué estructura de color acepta la herramienta, simplemente ve allí y echa un vistazo. Sin embargo, si ninguno de los colores te agrada, puedes seguir la misma estructura de creación presentada en caso de que no haya un grosor deseado, reemplazando “tamaño” con el código de color. Por ejemplo: border-y-[#243c5a].

Border Style

Como puedes ver, todos los bordes que hemos utilizado hasta ahora son sólidos. Sin embargo, no necesitamos limitarnos solo a este estilo de borde (es solo la forma con estilo predeterminado cuando no definimos otras formas). En total, hay cuatro estilos de borde disponibles, a saber:

• border-solid - es el estilo que ya conocemos y que llena todo el contorno de la cenefa;
  
• border-dashed - crea un estilo discontinuo para el borde;
  
• border-dotted - establece un estilo de puntos para el borde;
  
• border-double - crea dos bordes sólidos alrededor del elemento.
  

Border Radius

Utilizamos Border Radius cuando queremos redondear los bordes extremos de un elemento. La estructura de clases a implementar para este propósito es similar a las presentadas con Border Width y Border Color, con la diferencia de que es necesario alterar border por rounded y “tamaño” por uno de los prefijos “sm”, “md”, “lg”, “xl”, “2xl”, “3xl” o “full”.

Contornos

El concepto de contorno es muy similar al de borde, con diferencias muy específicas. El más importante de ellos es que, a diferencia de los bordes, los contornos no ocupan espacios en el elemento, sino que se construyen sobre ellos.

Aplicamos los conceptos de grosor, color y estilo de forma similar a lo que hemos hecho hasta ahora con los bordes, con la diferencia de que las estilizaciones para contornos se aplican en todos los lados del mismo. De esta manera tenemos las estructuras resumidas en outline-{grosor}, outline-{color} y outline-{estilo}:

Demasiado fácil, ¿no crees? Ahora que tenemos una base para la estructura de las clases de Tailwind relacionadas con este tipo de estilo. Poco a poco nos vamos familiarizando más con cómo implementar más y más clases, utilizando las otras que ya hemos aprendido como base. Solo es importante resaltar que, para el espesor de un contorno, utilizamos los valores 0, 1, 2, 4 y 8. Además de cualquier otro valor necesario, puedes crear nuevos valores de la misma forma que para bordes, como por ejemplo outline-[20px].

Además, en el caso de estilos, no existe una clase outline-solid como en los bordes. Basta utilizar la clase outline sin ningún otro prefijo, como se hizo en el código de la figura 12.

Finalmente, hay clases que crean espacios entre el límite del contenido y el contorno, que está más allá de él. Las clases que tienen esta función tienen la estructura outline-offset-{valor}, donde a valor le podemos atribuir 0, 2, 4 y 8 (también puedes crear un valor adicional con la misma lógica descrita en el párrafo anterior).

Utilizando border-none y outline-none

Dada toda la información ya presentada, todavía no he hablado de las clases border-none y outline-none. Lo dejé para el final de este artículo con la intención de que, a través de todas las clases que hemos visto que personalizan contornos y bordes, también tengas en cuenta que en algún momento será necesario eliminarlos. Las clases border-none y outline-none, respectivamente, remueven el borde y el contorno. Aquí un ejemplo:

Consideraciones finales

Tailwind CSS es una herramienta muy fácil de aprender y, a lo largo de este artículo, pude demostrar lo fácil que es aprender las estructuras de las clases que se ofrecen y también personalizarlas. Sugiero que practiques tantos bordes y contornos como puedas para adaptarte al contenido.

Si quieres realizar alguna consulta o simplemente quieres intercambiar alguna idea sobre estos y otros temas de otra manera, también puedes contactarme por correo electrónico bruno.cabral.silva2018@gmail.com o en mi perfil de LinkedIn.

¡Hasta luego!