Explorando Backgrounds con Tailwind - Parte 1

En el artículo de hoy, aprenderemos cómo utilizar algunos conjuntos de clases proporcionadas por Tailwind destinadas a usar y manipular fondos o backgrounds, que son un conjunto de atributos que definen las estilizaciones del fondo de los elementos. ¿Vamos allá?

Tailwind es un framework creado con el objetivo de mejorar el uso de CSS. Normalmente, el estilo del documento se realiza importando un archivo con extensión .css que contiene una descripción de los atributos de las clases que usaremos en cada elemento. En cambio, con el objetivo de hacernos la vida más fácil, Tailwind CSS proporciona un conjunto de clases diseñadas en el modelo atomic CSS, donde cada una tiene una única función, como aplicar el color negro al fondo de un elemento o transformar el texto subrayado.

De esta manera, simplemente agrega este framework a tu proyecto y todas estas clases ya estarán disponibles para su uso, solo necesitas insertarlas correctamente en cada elemento.

Este conjunto completo de clases se puede encontrar en la documentación de Tailwind CSS e, incluso si ninguno de ellos satisface tus necesidades, ¡también puedes crear uno nuevo que lo haga!

Enfocado en el desarrollo mobile-first, 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: basta con introducir el nombre del atributo (como por ejemplo: object-fit, margin o display), puesto a disposición 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 tu proyecto, según la tecnología que utilices. 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!

Primeros pasos

Antes de hablar más sobre algunas propiedades que conforman el concepto de fondo, necesitamos crear un espacio donde trabajaremos con ellas. Creemos entonces un documento que tenga una serie de elementos, a partir del cual podremos aplicar lo que vamos aprendiendo a cada uno de ellos:

En la Figura 2, creamos un contenedor principal donde hay otros cuatro contenedores en su interior. En el contenedor principal utilizamos las siguientes clases:

• w-full: fija el ancho del contenedor al 100% del tamaño de ancho disponible;
• h-screen: establece la altura del contenedor al 100% de la altura de la ventana gráfica (es decir, el 100% de la pantalla disponible para visualización);
• grid: permite la organización de elementos internos en formato de cuadrícula/tabla;
• grid-cols-2: define que el grid/tabla que estamos creando tendrá dos columnas;
• grid-rows-2: define que el grid/tabla que estamos creando tendrá dos líneas;
• gap-1: crea un espacio exterior de 4px entre elementos en el contenedor principal;
• p-1: crea un espacio interno de 4px para el contenedor principal.
  

Si ha ejecutado este código que creamos, verá que no se mostrará nada en este punto. Esto se debe a que aún no hemos creado ningún estilo para los contenedores internos: comprenda que estamos creando el esqueleto de lo que está por hacerse.

Background Color

Como sugiere el nombre, el Background Color es responsable de insertar colores en el fondo de un elemento. Hay varios colores proporcionados por Tailwind CSS que se pueden encontrar muy bien descritos y organizados en su documentación. Salvo excepciones, la mayoría de los colores se dividen en nueve tonos diferentes, definidos por las centenas de 100 a 900 (un fondo de 900 es más oscuro que uno de 100). Usamos estas clases mediante la siguiente notación:

bg-{cor}-{100-900}

Es importante resaltar que existen clases de cambio de color de fondo que no siguen esta notación y solo es necesario insertarlas sin el tono, como por ejemplo la clase bg-black, que establece el color de fondo en negro. Como se indicó anteriormente, todas las especificaciones de las clases disponibles se encuentran en la documentación. Para nuestro ejemplo, ¿qué tal si configuramos cada contenedor con un tono de azul diferente?

También puedes utilizar estas clases de Background Color para establecer la opacidad. Hacemos esto de dos maneras y usaremos ambas en el código de la Figura 5:

En los dos formularios presentados en la Figura 5, utilizamos la escala de 0 a 100 para definir el nivel de opacidad (recordando que sólo son válidos múltiplos de 10, como 20, 40, 50, 90, etc.). ¿Más fácil que eso? ¡Imposible!

Si has visto todos los colores que Tailwind pone a tu disposición y no te has sentido satisfecho, tengo una noticia increíble para ti: puedes crear el color que quieras. Independientemente de cómo hayas configurado tu Tailwind, quizás hayas notado que, ya sea a través de un script en el head del archivo HTML o creando un archivo separado, hay un objeto tailwind.config insertado en nuestro proyecto:

Tailwind.config se crea de forma diferente para cada forma en la que elijas instalar el framework, pero no desesperes: Si seguiste la guía completa paso a paso, en algún momento la implementaste y en eso trabajaremos.

En la Figura 7, dentro del objeto extend se creó un objeto llamado colors que posee una clave (regal-blue) y un valor (#243c5a). Así creamos una clase con un nuevo color: definimos su nombre (que en la figura 7 era regal-blue) y luego definimos el valor del color que queremos, utilizando los estándares aceptados para definir colores en CSS (siempre en formato string). Finalmente, ingresamos el nombre de la clase creada junto con el prefijo bg- y todo está listo: el color ha sido aplicado.

Background Clip

Background Clip delimita el área donde el color de fondo creado se aplicará a un elemento. Para ello utilizamos una de tres posibilidades:

• bg-clip-border - extiende el área de visualización del color de fondo insertado hasta el borde existente;
• bg-clip-padding - extiende el área de visualización del color de fondo insertado hasta el espacio interno, pero sin llegar al borde;
• bg-clip-content -extiende el área de visualización del color de fondo insertado hasta el contenido del elemento en cuestión, pero sin alcanzar el espaciado interno.
  

Observa el siguiente código y así comprenderás las tres aplicaciones:

Insertamos clases que crean un borde en cada elemento para que sea posible observar cómo actúa cada clase del Background Clip. Son:

• border-8 - establece un grosor de borde de 8 px;
• border-violet-300 - aplica un color violeta con tono 300 en el borde;
• border-dashed - cambia la plantilla de borde a estilo punteado.
  

También es posible utilizar el Background Clip para limitar el efecto del color de fondo al texto dentro del elemento. Para ello utilizamos la clase bg-clip-text. Vea:

También utilizamos algunas clases adicionales en esta nueva implementación además de bg-clip-text, que fueron:

• flex - habilita las funcionalidades Flexbox para el contenedor del elemento para que podamos usar las clases justify-center y items-center para alinear elementos internos;
• justify-center - alinea los elementos dentro del contenedor con el centro, en relación con el eje principal al que están vinculados (que en este caso es el eje x);
• items-center - alinea los elementos dentro del contenedor con el centro, en relación con el eje transversal (que en este caso es el eje y).
• text-transparent - Hace que el color del texto sea transparente para que tu color original no choque con el color de fondo, que será tu nuevo color;
• text-6xl - Establece el tamaño de fuente del texto en 60 px;
• font-bold - Crea un efecto de negrita en el texto del elemento.

Consideraciones finales

El background es un concepto crucial en la vida de quienes eligieron el camino del Front-end y CSS. La principal sugerencia aquí es practicar mucho para consolidar este conocimiento de la mejor manera posible. Volveremos pronto con más información sobre los antecedentes, ¡así que estad atentos para más información pronto! Por ahora, espero que este artículo te haya ayudado a dominar las clases relacionadas con antecedentes de Tailwind.

Si te ha parecido interesante este artículo, te gustaría aclarar alguna duda o simplemente quieres intercambiar ideas sobre estos y otros temas, también puedes contactar conmigo, ya sea vía correo electrónico bruno.cabral.silva2018@gmail.com o en LinkedIn.

¡Éxito!