Otras propiedades
Color checkbox y radio
Para cambiar el color de un input de tipo checkbox o radio utilizamos la clase accent-* (que define la propiedad CSS accent-color).
<div class="flex gap-3">
<input type="checkbox" class="accent-red-700 size-4">
<input type="radio" class="accent-green-600 size-4">
</div>
Color del cursor
En campos de formularios editables o elementos con el atributo contenteditable, se puede gestionar el color del cursor con las clases caret-* (caret-color en CSS).
Cursor del ratón
Para cambiar el cursor del ratón cuando pasa por encima de un elemento, tenemos las clases cursor-*.
<div class="size-12 bg-amber-400 cursor-grabbing"></div>
Desactivar eventos de usuario
Podemos desactivar la interacción del usuario (eventos) con un elemento con la clase pointer-events-none. Esto es útil cuando tenemos elementos con opacidad 0 en lugar de display: none por razones de animación.
<nav class="bg-blue-800 text-white p-2">
<ul class="flex gap-2">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="group relative">Submenu
<!-- Por defecto no recibe eventos (hover) hasta que no ponemos el ratón encima del padre -->
<ul class="opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-[opacity,top] duration-300 flex flex-col gap-2 absolute top-[130%] group-hover:top-full left-0 bg-blue-700 text-white p-2">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</li>
</ul>
</nav>