Utilizar transformaciones en Tailwind

En el artículo de hoy aprenderemos a utilizar algunas clases puestas a disposición por Tailwind destinadas a usar y manipular transformaciones, un conjunto de atributos que manipulan escalas, rotaciones, desplazamientos, entre otros. ¿Vamos allá?

Tailwind es una herramienta que facilita mucho el uso de CSS. Generalmente, realizamos el estilo del documento importando un archivo con extensión .css, que a su vez tiene una serie de atributos que harán toda la magia detrás de las líneas.

Con Tailwind CSS es muy diferente: está disponible una lista específica de clases diseñadas en el modelo atomic CSS, donde cada una de ellas tiene una única función, como aumentar el tamaño de un texto o rellenar el elemento con blanco. De esta manera, ¡solo necesitas agregar un conjunto de clases que, juntas, realizan todas las estilizaciones que quieras!

Utilizando Tailwind CSS

Si consultas la documentación de Tailwind CSS, notarás que hay varias formas de instalarlo. Puedes elegir cualquiera de los pasos guiados por Tailwind y que se ajusten a la tecnología que estás utilizando.

Primeros pasos

Para practicar los conceptos que estamos aprendiendo, crearemos una página que tendrá cuatro imágenes, organizadas en el modeo de grid conforme al código siguiente:

En el contenedor principal a partir de la línea 6 de la figura 2, creamos un contenedor principal que tendrá otros contenedores en su interior. En él insertamos las siguientes clases:

• w-full - fija el ancho del container al 100% del tamaño disponible;
• h-screen - define la altura del container al 100% del viewport (es decir, 100% de la pantalla disponible para visualización);
• bg-black - define como negro el color del background de la página;
• grid - habilita la organización de los elementos internos en formato grade;
• grid-cols-2 - define que el grade que estamos creando tendrá dos columnas;
• grid-rows-2 - define que el grade que estamos creando tendrá dos líneas;
• gap-1 - crea un espaciado externo de 4px entre los elementos del contêiner principal;
• p-2 - crea un espaciado interno de 8px para el contêiner principal.
  

Para los contenedores internos de las líneas 7, 10, 13 y 16 de la figura 2, además de algunas de las clases ya explicadas, tenemos:

• border-2 - crea un borde con espesor de 8px;
• border-white - define que el color de dicho borde sea blanco.
  

Finalmente, cada contenedor interno tiene una imagen, donde se han definido las siguientes clases (además de algunas de las que ya hemos hablado):

• h-full - fija la altura del contenedor al 100% del tamaño de altura disponible;
• object-cover - amplía la imagen para que ocupe todo el elemento sin distorsionarla.
  

Ahora que hemos creado el entorno para la práctica, expliquemos los temas relacionados con scale, rotate, translate, skew y transform origin, donde todos implican el uso de la transformación de elementos de una manera diferente.

Scale

El conjunto de clases relacionadas con la escala definen qué escala usaremos para un elemento determinado. Podemos utilizar la manipulación de escala de dos maneras:

• scale-{porcentaje} - aumenta o disminuye la escala de todos los lados de un elemento, donde “porcentaje” es un número entre 0, 50, 75, 90, 95, 100, 105, 110, 125 y 150, que representan los porcentajes otorgados por las clases Tailwind ( es posible agregar nuevos a través del archivo Tailwind.config y esto lo mostraremos más adelante);
• scale-x-{porcentaje} o scale-y-{porcentaje} - aumenta o disminuye la escala de solo una de las direcciones de un elemento (X para horizontal e Y para vertical), donde los valores de “porcentaje” son los mismos que los ya mencionados anteriormente.
  

Para ejemplificar el uso y comportamiento de la scale, definamos una escala diferente para cada imagen de nuestra página cuando pasamos el mouse sobre cada una. Notarás que el tamaño de los espacios entre los bordes creados disminuye y aumenta según cada configuración de escala creada para las imágenes:

En el código de la Figura 4, definimos hovers para cada imagen, es decir, Cada vez que pasamos el ratón sobre ellos la escala pasa de 100 al definido en cada uno de ellos. Observa en la línea 8 que también es posible utilizar valores “negativos”, que servirán para invertir la imagen además de aumentar su escala.

Rotate

Rotate se utiliza para rotar un elemento. Todas las clases que tienen esta función tienen la notación rotate-{ángulo}, onde ángulo es uno de los valores entre 0, 1, 2, 3, 6, 12, 45, 90 y 180, y también es posible agregar nuevos ángulos a través del archivo Tailwind.config (una vez más, refuerzo que lo haremos vea esto más tarde, ¡mantenga la ansiedad por ahora!).

Para practicar, cambiemos la transformación de nuestras imágenes de escala a rotación, definiendo una rotación para cada imagen que ocurrirá cuando pasemos el mouse sobre el elemento:

Translate

Translate mueve el elemento desde su posición inicial, ya sea en el eje horizontal o vertical. A diferencia de las anteriores, existe una gama mucho más amplia de clases que definen la traducción de una imagen (ver la documentação para conocer todas), donde la mayor parte puede ser utilizada por la notación translate-{dirección}-{cantidad}: para dirección utilizamos X o Y para definir si queremos la acción en horizontal o en vertical, respectivamente, y cantidad puede ser definida por tres valores principales:

• px - (mueve 1px para alguna de las direcciones);
• número - mueve el elemento una distancia fija en píxeles (ver documentación para verifique los valores disponibles o cree sus propios valores usando Tailwind.Config, como mostraremos);
• fracción - mueve el elemento una distancia variable según el porcentaje respecto al elemento (también es necesario consultar la documentación para verificar los valores disponibles).
  

Veamos un ejemplo de translate. Altera las clases rotate para translate, de modo que cuando pasas el mouse sobre el elemento, la imagen se mueve en una dirección:

Ni siquiera necesito decir otra vez que es posible utilizar valores negativos, ¿verdad? En relación con el eje x, cuando se utiliza un valor negativo el elemento se mueve hacia la izquierda en lugar de hacia la derecha. Con el eje y, los elementos se mueven hacia arriba en lugar de hacia abajo.

Skew

Skew inclina los elementos en relación con su posición inicial. La notación para usar este conjunto de clases Tailwind es skew-{dirección}-{cantidad}, donde para dirección utilizamos X o Y para definir si queremos la acción horizontalmente o verticalmente, y para cantidad podemos utilizar los valores 0, 1, 2, 3, 6 e 12 (y, como de costumbre, se pueden crear nuevos valores utilizando Tailwind.config).

Para nuestro ejemplo, sustituiremos las clases translate por clases skew, para que, al pasar el mouse sobre una imagen, ésta se inclina en alguna dirección:

Transform Origin

Por último, pero no menos importante, podemos definir el origen en el que se produce una transformación, que podrían ser las direcciones:

• origin-center - utiliza el centro como referencia;
• origin-top - se basa en el tope como referencia;
• origin-top-right - la referencia será al tope y a la derecha;
• origin-right - utiliza la derecha como referencia;
• origin-bottom-right - la referencia será al fondo y a la derecha;
• origin-bottom - se basa en el fondo como referencia;
• origin-bottom-left - la referencia será al fondo y a la izquierda;
• origin-left - utiliza la izquierda como referencia;
• origin-top-left - la referencia será al tope y a la izquierda.
  

Creando nuevos valores para los transforms

Como se mencionó varias veces en este artículo, es posible crear nuevos valores que no están disponibles en Tailwind CSS. ¡Pues por fin ha llegado el momento!

Independientemente de cómo haya configurado su Tailwind, es posible que haya notado que, ya sea a través de un script en el head desde el archivo HTML, o, al crear un archivo separado, hay un objeto tailwind.config insertado en nuestro proyecto. Se crea de forma diferente para cada forma que elijas instalar el framework, pero no te preocupes: Si seguiste la guía completa paso a paso, en algún momento la implementaste y en eso trabajaremos.

Para crear nuevos valores para scale, rotate, translate y skew que no existen en Tailwind CSS, puedes seguir el ejemplo de la Figura 13: simplemente crea un objeto con un nombre específico para cada tipo de transformación (spacing es el único que no posee el mismo nombre, siendo este referente de translate en este caso) y definir una clave y un valor, donde la clave será el nombre de la clase que usaremos en nuestro código.

Consideraciones finales

Es increíble cómo podemos transformar nuestros elementos con estos cuatro pilares principales que aquí cubrimos, ¿no crees? Ahora depende de ti: crea nuevos códigos usando estas clases, crea estilos increíbles y deja tus comentarios aquí contándonos la mejor experiencia que tuviste usando Tailwind's Transform. ¿Que crees?

Si quieres consultar alguna duda o simplemente charlar sobre estos y otros temas de otra manera, también puedes contactarme por correo electrónico bruno.cabral.silva2018@gmail.com o vía LinkedIn.

¡Hasta luego!