Creando un Subrayado con Degradado en Tailwind CSS

Esta es una publicación breve sobre cómo crear un subrayado con degradado usando Tailwind CSS para separar secciones de tu página, ¡o simplemente para hacer que tus enlaces se vean geniales! Explicaré el código a continuación, pero si solo quieres ver el código, puedes saltar al final.

Cómo crear un subrayado con degradado

Creamos esto como un elemento posicionado absolute, lo que requiere que el elemento padre sea relative. Esto nos permite posicionar el elemento en relación con el padre (sorpresa). En este caso vamos a hacer que subraye el elemento padre, aunque podrías ajustar este posicionamiento.

Color del subrayado con degradado

Vamos a usar la utilidad bg-gradient-to-r para crear un degradado de izquierda a derecha. La dirección realmente no importa, el punto es que es un degradado. Para el color inicial vamos a hacerlo transparente, ir a tu color deseado, y volver a transparente. Podemos hacer esto con las utilidades bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0. Esto creará un degradado de transparente a sky-500 a transparente. Puedes ajustar la opacidad del color del medio a lo que quieras. Elegí 70 porque me pareció que se veía bien.

Altura del subrayado con degradado

Vamos a establecer la altura del subrayado en h-px. Esto lo hará de 1px de alto. Puedes ajustar esto a lo que quieras.

Posicionando el subrayado con degradado

Queremos que el subrayado con degradado abarque el borde inferior del elemento padre. Entonces, la primera utilidad que queremos usar es inset-x-0 para que vaya desde el borde izquierdo hasta el borde derecho, luego bottom-0 para colocarlo en la parte inferior. Puedes encontrar más información sobre estas utilidades en la Documentación de Tailwind.

Si necesitas ajustar la ubicación vertical del subrayado, puedes hacerlo usando la utilidad bottom. Por ejemplo, si quieres moverlo un poco hacia abajo para superponerse con un borde inferior, puedes usar -bottom-px para moverlo 1px hacia abajo.

Código final

Subrayado con degradado genérico

Aquí uso el color sky-500 de la paleta de colores de Tailwind. Puedes usar el color que quieras.

<div class="relative">
  <span
    class="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0"
  ></span>
</div>

Subrayado de enlace al pasar el cursor

Esto es muy similar a lo anterior, pero agregué un efecto hover al subrayado. También hay una transición porque ¿a quién no le gustan las transiciones?

<button class="group relative border-2 p-2">
  ¡Mi Enlace!
  <span
    class="absolute inset-x-0 -bottom-px h-px bg-gradient-to-r from-sky-500/0 via-sky-500/70 to-sky-500/0 opacity-0 transition group-hover:opacity-100"
  ></span>
</button>