En este artículo seguimos trabajando en el desarrollo de interfaces de usuario desarrolladas con las clases de utilidad del framework Tailwind CSS. Vamos a hacer una típica caja para un avatar en la que mostraremos la imagen del usuario y sus datos principales (nombre y correo). Lo haremos aplicando algunos conocimientos interesantes para hacer efectos sobre las imágenes, y grupos de hover, por lo que espero que pueda resultar una práctica interesante para quien está aprendiendo Tailwind.

Este es un artículo fundamentalmente práctico. Recuerda que tienes el Manual de Tailwind CSS para aprender lo básico y poder entender qué es lo que se está haciendo aquí y cómo montar un proyecto en el que uses este framework CSS.

Imagen para un avatar

Comenzamos creando una simple imagen para un avatar de un usuario. Básicamente lo que queremos es que aparezca con sus bordes totalmente redondeados y que se adapte el tamaño a una anchura y altura determinados, sin deformar la imagen independientemente de las proporciones que tenga.

<img 
  src="/persona.jpg" 
  alt="Avatar" 
  class="w-16 h-16 rounded-full object-cover">

Un repaso a las clases de utilidad que hemos usado:

• w-16 h-16 para definir el ancho y la altura del avatar a 4 rem (64px), lo que resulta un tamaño común para avatares de usuario.
• rounded-full para conseguir que la imagen sea completamente circular. Lo típico para mostrar un avatar.
• object-cover. Esta clase es esencial porque asegura que la imagen cubra completamente el espacio asignado sin deformarse, manteniendo las proporciones de la imagen independientemente de su altura y anchura.

Hasta aquí no hemos hecho demasiado especial. Vamos a seguir aportando contenido a esta caja y estilos más potentes a continuación.

Una caja tipo cápsula para el avatar

Ahora que tenemos la imagen vamos a avanzar un poco creando una caja para ese avatar, de tipo cápsula con rounded-full, que tenga un fondo gris oscuro y que incluya el nombre y el email de la persona.

<div class="inline-block bg-gray-700 text-white px-1 py-1 rounded-full">
  <div class="flex items-center">
    <img src="/persona.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white object-cover mr-2">
    <div class="mr-4">
        <div class="font-bold">Nombre de la Persona</div>
        <div class="text-sm">email@ejemplo.com</div>
    </div>
  </div>
</div>

Aquí tenemos un montón de novedades en el código pero básicamente consiste en una caja con fondo que dentro tiene los elementos que habíamos comentado.

Ahora voy a comentar las clases de utilidad más importantes que se han usado y que son esenciales para este diseño.

• inline-block para que la caja del avatar no ocupe toda la anchura. Si no lo ponemos haría que la división se estirase, independientemente de no tener un contenido tan largo.
• rounded-full que hace el efecto de cápsula

Luego tenemos dentro un contenedor flex, que es importante para conseguir que la imagen aparezca a un lado y los datos de este usuario al otro lado y podamos centrar en la vertical ambos bloques:

• flex, para usar flexbox
• items-center, para que la imagen del avatar y el contenido que tiene al lado se alinee de manera vertical al centro.

El resto de estilos son bastante básicos por lo que espero que los entiendas. El resultado lo puedes ver en la siguiente imagen:

Efecto hover sobre la caja del avatar

Ahora vamos a hacer un efecto hover bien sencillo, que sería simplemente cambiar el color de fondo de la cápsula.

<div class="inline-block bg-orange-700 text-white px-1 py-1 rounded-full hover:bg-yellow-800 transition duration-300 ease-in-out">
  <div class="flex items-center">
    <img src="/persona.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white object-cover mr-2">
    <div class="mr-4">
        <div class="font-bold">Nombre de la Persona</div>
        <div class="text-sm">email@ejemplo.com</div>
    </div>
  </div>
</div>

Las clases nuevas en este caso son:

• hover:bg-yellow-800 para conseguir un efecto de hover
• transition para que el cambio del estilo CSS se haga de manera suavizada
• Y finalmente, duration-300 y ease-in-out para que ocupe 0.3 segundos y tenga una función de cambios no tan lineal

Esto ha estado muy bien y nos ha dado un efecto interesante en la caja del avatar pero podría mejorarse.

Cómo usar group y group-hover para cambiar elementos internos cuando hay un hover en el padre

Ahora vamos a pensar que el efecto hover que deseas haga que el fondo de la cápsula que estaba bastante oscuro fuera a unos tonos bastante claros. ¿Qué pasaría con los textos y el borde de la imagen? pues que no contrastaría suficiente con un fondo claro.

Eso se puede solucionar con las clases group y la variante group-hover como vamos a ver. Pero antes que nada explico qué son estas nuevas clases de utilidad.

• La clase group la colocamos en el elemento padre, estableciendo un grupo de elementos desde ese elemento padre hacia los hijos que tiene dentro.
• La variante group-hover la podemos usar igual que usábamos la variante hover, con la diferencia que se activará cuando se pasa el ratón sobre el elemento que tiene la clase group.

El código de este ejemplo nos quedaría así.

<div class="group inline-block bg-teal-800 text-white px-1 py-1 rounded-full hover:bg-yellow-100 transition duration-300 ease-in-out">
  <div class="flex items-center">
    <img src="/persona.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white object-cover mr-2 group-hover:border-sky-500 group-hover:brightness-125">
    <div class="mr-4 group-hover:text-gray-700">
        <div class="font-bold">Nombre de la Persona</div>
        <div class="text-sm">email@ejemplo.com</div>
    </div>
  </div>
</div>

Como ves, hemos colocado la clase group en el padre de toda la interfaz, la cápsula completa.

Luego hemos usado estas variantes:

• group-hover:border-sky-500 y group-hover:brightness-125 sobre la imagen. De esta manera le hemos colocado un borde de un color distinto y además hemos incorporado un filtro de imagen de los que te ofrece Tailwind, en este caso para aumentar el brillo de la foto del avatar.
• En el elemento que incluye el nombre y email del usuario hemos colocado group-hover:text-gray-700 para cambiar el color del texto cuando el usuario coloca el enlace en la cápsula.

El resultado de este efecto lo puedes ver en el siguiente Gif animado.

De este modo hemos conseguido una interfaz de usuario atractiva para los avatares, podrá gustar más o menos pero al menos esperamos que te haya servido para aprender acerca de las clases de utilidad de Tailwind CSS y temas un poco más avanzados como los grupos de hover o los filtros de imagen.