Tutorial TailwindCSS: Hover, focus y estado de Tailwind CSS

Hover, focus, active de Tailwind CSS

Tailwind CSS proporciona clases de utilidad para manejar los estados interactivos de los elementos HTML, como hover, focus y active. Estas clases permiten aplicar estilos específicos cuando los usuarios interactúan con los elementos de una página web.

Hover

La clase hover: se utiliza para aplicar estilos cuando un usuario pasa el cursor sobre un elemento. Esta clase se antepone a otras clases de utilidad. Por ejemplo, para cambiar el color de fondo de un botón al pasar el cursor sobre él, se puede usar la siguiente clase:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Haz hover
</button>

Focus

La clase focus: se utiliza para aplicar estilos cuando un elemento recibe el foco, como cuando un usuario hace clic en un campo de formulario o navega a él usando el teclado. Esta clase también se antepone a otras clases de utilidad. Un ejemplo de uso sería cambiar el borde de un campo de entrada cuando se enfoca:

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded py-2 px-4" type="text" placeholder="Haz focus">

Active

La clase active: se utiliza para aplicar estilos mientras un elemento está siendo activado, como cuando un botón es presionado. Similar a las otras clases de estado, active: se antepone a otras clases de utilidad. Aquí hay un ejemplo de cómo cambiar el color de fondo de un botón mientras se presiona:

<button class="bg-green-500 active:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Actívame
</button>

Las clases de estado hover:, focus: y active: pueden combinarse con otras clases para crear estilos más complejos. Por ejemplo, para un botón que cambia de color al pasar el cursor sobre él y muestra un borde diferente cuando está enfocado, se puede usar lo siguiente:

<button class="bg-red-500 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-200 text-white font-bold py-2 px-4 rounded">
  Haz hover y focus
</button>

Las clases de estado en Tailwind CSS se pueden usar en cualquier componente de la interfaz de usuario para mejorar la experiencia del usuario mediante la adición de retroalimentación visual en respuesta a las interacciones del usuario.

First, last, odd, even de Tailwind CSS

Tailwind CSS ofrece clases de utilidad first:, last:, odd: y even: que permiten aplicar estilos condicionales a elementos dentro de una lista o conjunto de elementos. Estas clases son particularmente útiles para personalizar el diseño de elementos repetidos como filas de tablas, listas de elementos, o cualquier colección de nodos en el DOM.

First

La clase first: aplica estilos al primer elemento de un grupo de elementos hermanos. Por ejemplo, para cambiar el margen superior del primer elemento de una lista, se puede utilizar la siguiente clase:

<ul>
  <li class="first:bg-blue-100 mt-2">Elemento 1</li>
  <li class="mt-2">Elemento 2</li>
  <li class="mt-2">Elemento 3</li>
</ul>

Last

La clase last: aplica estilos al último elemento de un grupo de elementos hermanos. Por ejemplo, para eliminar el margen inferior del último elemento de una lista:

<ul>
  <li class="mb-2">Elemento 1</li>
  <li class="mb-2">Elemento 2</li>
  <li class="last:bg-blue-100 mb-2">Elemento 3</li>
</ul>

Odd

La clase odd: aplica estilos a los elementos de índice impar dentro de un grupo de elementos hermanos. Esto es útil para alternar el color de fondo de las filas de una tabla:

<table class="min-w-full divide-y divide-gray-200">
  <tbody>
    <tr class="odd:bg-gray-100">
      <td>Fila 1</td>
    </tr>
    <tr class="odd:bg-gray-100">
      <td>Fila 2</td>
    </tr>
    <tr class="odd:bg-gray-100">
      <td>Fila 3</td>
    </tr>
    <tr class="odd:bg-gray-100">
      <td>Fila 4</td>
    </tr>
  </tbody>
</table>

Even

La clase even: aplica estilos a los elementos de índice par dentro de un grupo de elementos hermanos. Es común usarla junto con odd: para crear un patrón de colores alternos:

<table class="min-w-full divide-y divide-gray-200">
  <tbody>
    <tr class="even:bg-gray-50">
      <td>Fila 1</td>
    </tr>
    <tr class="even:bg-gray-50">
      <td>Fila 2</td>
    </tr>
    <tr class="even:bg-gray-50">
      <td>Fila 3</td>
    </tr>
    <tr class="even:bg-gray-50">
      <td>Fila 4</td>
    </tr>
  </tbody>
</table>

Estas clases de estado se pueden combinar con otras clases de utilidad de Tailwind CSS para crear estilos más complejos y específicos. Por ejemplo, se pueden usar con clases de margen, padding, color de fondo, bordes, etc., para ajustar el diseño de los elementos de manera granular.

<ul class="list-disc pl-5">
  <li class="first:text-blue-500 last:text-red-500 odd:bg-gray-100 even:bg-gray-50 py-1">
    Elemento 1
  </li>
  <li class="py-1">Elemento 2</li>
  <li class="py-1">Elemento 3</li>
  <li class="py-1">Elemento 4</li>
</ul>

En este ejemplo, el primer elemento tendrá texto azul, el último texto rojo, y los elementos impares y pares tendrán diferentes colores de fondo. Esto demuestra cómo las clases first:, last:, odd: y even: pueden ser utilizadas para mejorar la presentación de listas y conjuntos de elementos en una página web.

Estados de formulario de Tailwind CSS

Tailwind CSS proporciona varias clases de utilidad para manejar los estados de formulario, como disabled, checked, required e invalid. Estas clases permiten aplicar estilos específicos a elementos de formulario en función de sus estados.

Disabled

La clase disabled: se utiliza para aplicar estilos a elementos de formulario que están deshabilitados. Por ejemplo, para cambiar el color de fondo y el cursor de un botón deshabilitado:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
  Botón deshabilitado
</button>

Checked

La clase checked: se utiliza para aplicar estilos a elementos de formulario que están marcados, como checkboxes o radio buttons. Por ejemplo, para cambiar el color de fondo de un checkbox cuando está marcado:

<input type="checkbox" class="checked:bg-blue-500">

Required

La clase required: se utiliza para aplicar estilos a elementos de formulario que son obligatorios. Por ejemplo, para cambiar el borde de un campo de entrada requerido:

<input type="text" class="border-2 border-gray-300 required:border-red-500" required>

Invalid

La clase invalid: se utiliza para aplicar estilos a elementos de formulario que no cumplen con los requisitos de validación. Por ejemplo, para cambiar el color de borde y mostrar un mensaje de error cuando el campo es inválido:

<input type="email" class="border-2 border-gray-300 invalid:border-red-500">
<span class="invalid:visible text-red-500 text-sm">Correo electrónico no válido</span>

Estas clases de estado pueden combinarse para crear estilos más específicos y complejos. Por ejemplo, para un campo de entrada que cambia de borde cuando está enfocado, requerido o inválido:

<input type="text" class="border-2 border-gray-300 focus:border-blue-500 required:border-yellow-500 invalid:border-red-500" required>

En este ejemplo, el campo de entrada tendrá un borde diferente dependiendo de si está enfocado, si es obligatorio o si es inválido.

Las clases de estado de formulario de Tailwind CSS permiten una personalización precisa y granular de los estilos de los elementos de formulario, mejorando la experiencia del usuario al proporcionar retroalimentación visual clara en respuesta a la interacción y validación del formulario.