Tailwindcss

Back

Gradient text

https://tailwindcss.com/docs/background-clip#cropping-to-text (opens in a new tab)

<div class="text-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
    Hello world
  </span>
</div>

Link underline effect on:hover

https://katiekodes.com/link-underline-grow-tailwind-css/ (opens in a new tab)

bg-gradient-to-r from-blue-200 to-blue-200
bg-no-repeat [background-position:0_88%]
[background-size:100%_0.2em]
motion-safe:transition-all motion-safe:duration-200
hover:[background-size:100%_100%]
focus:[background-size:100%_100%]