Manejo de estados de Tailwind CSS

Tailwind CSS ofrece potentes clases de estado (modificadores de estado) para controlar los cambios de estilo de los elementos en diferentes estados de interacción.

Tailwind CSS proporciona una variedad de clases de estado (como `hover:`, `focus:`, `active:`, etc.) para ayudar a los desarrolladores a manejar rápidamente los efectos de interacción. Combinando estas clases de estado, puedes lograr fácilmente cambios de estilo en estados como hover, focus, clic, etc., mejorando la experiencia del usuario.

Prefijos de las clases de estado:

1. Hover

) se refiere a cuando el usuario coloca el cursor sobre un elemento, el estilo del elemento cambia. Usandohoverel prefijo, puedes lograr fácilmente este efecto.hover:Sintaxis

Por ejemplo,：

hover:{class}

cambiará el color de fondo del elemento al pasar el ratón por encima ahover:bg-sky-700Usos comunessky-700。

Ejemplo：

ablue-500Más ejemplossky-700。

: Al pasar el ratón, el color del texto cambia a blanco.：

• hover:text-white: Al pasar el ratón, se añade subrayado al texto.
• hover:underline: Al pasar el ratón, se añade un borde de 2px y se establece en gris.
• hover:border-2 hover:border-gray-5002. Focus

2. Focus

) se refiere a cuando el usuario interactúa con un elemento de formulario (como un campo de entrada), el elemento obtiene el foco. Usandofocusel prefijo, puedes controlar el estilo del elemento cuando está enfocado.focus:Sintaxis

Por ejemplo,：

focus:{class}

mostrará un anillo azul cuando el elemento obtenga el foco.focus:ring-2 focus:ring-blue-600Ejemplo

Más ejemplos

: Al enfocar, el color del texto cambia a negro.：

• focus:text-black: Al enfocar, el color del borde del campo de entrada cambia a azul.
• focus:border-blue-500: Al enfocar, se muestra un anillo verde, con resaltado y se establece la opacidad.
• focus:ring-4 focus:ring-opacity-50 focus:ring-green-5003. Activo (Active)

3. Activo (Active)

) se refiere a cuando el elemento es presionado por el usuario, el estilo del elemento cambia. Usandoactiveel prefijo puede controlar el estilo al hacer clic.active:Sintaxis

Por ejemplo,：

active:{class}

cambiará el color de fondo a verde cuando el elemento se presione.active:bg-green-700Usos comunes

Ejemplo：

Más ejemplosgreen-700。

: Al hacer clic, el color del texto cambia a gris.：

• active:text-gray-600: Al hacer clic, se añade un efecto de anillo verde de resaltado al elemento.
• active:ring-2 active:ring-opacity-50 active:ring-green-5004. Estados combinados

4. Estados combinados

Sintaxis

Por ejemplo,：

{state}:{class}

cambiará el color de fondo en modo oscuro, en el punto de interrupción medio y al pasar el ratón.dark:md:hover:bg-fuchsia-600Ejemplo

, mientras que en modo oscuro, el color de fondo cambia asky-700Más ejemplosfuchsia-600。

: En dispositivos de pantalla pequeña, cuando el elemento obtiene el foco, se añade un anillo de resaltado de 2px.：

• sm:focus:ring-2: En dispositivos de pantalla grande, al hacer clic en el botón, el color de fondo cambia a rojo.
• lg:active:bg-red-5005. Pseudo-clases (Pseudo-classes)

5. Pseudo-clases (Pseudo-classes)

Modificadores de pseudo-clases comunes

: Se aplica al primer elemento hijo.：

• first-child: Se aplica al último elemento hijo.
• last-child: Se aplica a los elementos hijos en posición impar.
• odd-child: Se aplica a los elementos hijos en posición par.
• even-childEjemplo

• se pondrá en negrita, y el último elemento de la listaItem 1tendrá un tipo de letra más ligero.Item 3Los elementos impares y pares se distinguirán con diferentes colores de fondo.
• 6. Estados de formulario (Form States)

6. Estados de formulario (Form States)

), inválido (required) y deshabilitado (invalid) estados.disabledClases comunes

: Indica que el campo de entrada es obligatorio.：

• required: Se utiliza para entradas de formulario inválidas.
• invalid: Elementos de formulario deshabilitados.
• disabledEjemplo

• Si el campo de entrada está deshabilitado, el color de fondo se volverá gris.
• 7. Estilos basados en el estado del padre (Group Modifier)

7. Estilos basados en el estado del padre (Group Modifier)

modificador, puedes ajustar el estilo de los elementos hijos cuando el estado del padre cambia.group-hoverygroup-focusSintaxis

Por ejemplo,：

group-{state}:{class}

aplicará el color de fondo gris al elemento hijo cuando el padre esté en hover.group-hover:bg-gray-300Ejemplo

8. Diseño responsivo y modo oscuro

8. Diseño responsivo y modo oscuro

Sintaxis

Prefijo responsivo:：

• Prefijo de modo oscuro:sm:, md:, lg:, xl:, 2xl:
• Ejemplodark:

, en pantallas medianas, al enfocar se añade un anillo azul de resaltado, y en modo oscuro el color de fondo se vuelve gris.blue-7009. Configuración de variantes (Variants)

9. Configuración de variantes (Variants)

Entailwind.config.jssección, configurar qué variantes de estado se habilitan. De esta manera, puedes habilitar o deshabilitar los cambios de estilo en estados específicos según las necesidades del proyecto.variantsEjemplo

se añadebackgroundColorestado, mientras queactiveygroup-hoverse añadetextColorestado.focus-visibleydisabled10. Primero, último, impar y par

10. Primero, último, impar y par

el modificador para establecer el estilo del elemento:firstylastEjemplo

Efecto:

• El color del texto del primer elemento de la lista se vuelve rojo text-red-500.
• La fuente del último elemento de la lista se vuelve negrita font-bold.

oddModificador: odd se utiliza para seleccionar todos los elementos secundarios en posiciones impares dentro del contenedor principal (índice basado en 1).

Efecto:El color de fondo de los elementos 1 y 3 de la lista se vuelve gris claro bg-gray-100.

evenModificador: even se utiliza para seleccionar todos los elementos secundarios en posiciones pares dentro del contenedor principal (índice basado en 1).

Efecto:El color de fondo de los elementos 2 y 4 de la lista se vuelve un gris más oscuro bg-gray-200.

Referencia de modificadores