Color
hover

<< Más sobre textos Listas >>

Por ejemplo, podemos usar la clase text-blue-600 para controlar el color de un elemento de texto y si le añadimos la clase dark:text-sky-400 pasaría a usarse ese color si el theme del navegador es dark.

<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>

Podemos modificar la opacidad de un elemento mediante /valor.

<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>

hover

Podemos añadirle la posibilidad de al hacer hover que cambie de color. Añadiendo el prefijo hover al valor del color que quieras usar.

<p class="...">
  Oh I gotta get on that
  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,
  I'm late on everything!
</p>

Y personalizarlo mucho más.

<< Más sobre textos Listas >>