Color
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.