Entendiendo las variantes y las pseudo-clases

Clase 14 de 29 • Curso de Tailwind CSS 1

Clase anteriorSiguiente clase

Resumen

¿Qué son las variantes en el diseño web?

Las variantes son herramientas cruciales en el diseño web que permiten que nuestro diseño cambie dinámicamente según ciertas condiciones. Piensa en ellas como instrucciones que adaptan nuestro diseño a diversas situaciones. Entre los ejemplos más comunes se encuentran:

  • Responsive: Adapta el diseño al tamaño de la pantalla.
  • Hover: Cambia el diseño cuando el cursor se coloca sobre un elemento.
  • Focus: Altera el diseño cuando un elemento está enfocado, como en el caso de botones o campos de entrada.
  • Disabled: Aplica estilos diferentes a elementos deshabilitados.

Estas variantes son esenciales para crear interfaces de usuario adaptables y centradas en mejorar la experiencia del usuario.

¿Qué es una pseudo clase en CSS?

Una pseudo clase es una palabra clave añadida a un selector que especifica un estado especial del elemento, permitiendo diseñar estilos específicos para esos estados. En el caso del diseño responsive, las pseudo clases pueden incluir palabras clave como:

  • SM: Para pantallas pequeñas.
  • MD: Para pantallas medianas.
  • LG: Para pantallas grandes.
  • XL: Para pantallas muy grandes.

Las pseudo clases como hover, focus y disabled también juegan un papel fundamental en la adaptación del diseño a distintos estados del usuario en la interfaz.

¿Cómo configurar variantes no incluidas en Tailwind CSS?

Para configurar variantes como disabled que no vienen por defecto en Tailwind CSS, es necesario realizar una pequeña configuración adicional en tu proyecto. Aquí te mostramos cómo hacerlo paso a paso:

  1. Crear un archivo HTML5: Crea un archivo HTML con la DOCTYPE estándar de HTML5 y enlaza tus hojas de estilo.

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Ejemplo Variantes</title>
</head>
<body>
    <!-- Tu código HTML aquí -->
</body>
</html>

  2. Agregar la pseudo clase disabled: Incluye el código de ejemplo que desees modificar. En este caso, un botón que queremos que cambie su estilo cuando está deshabilitado.

    <button class="bg-blue-500 disabled:bg-blue-300 disabled:cursor-not-allowed">Botón Deshabilitado</button>

  3. Configurar tailwind.config.js: Abre el archivo de configuración de Tailwind tailwind.config.js y agrega disabled a la lista de variantes en la sección correspondiente.

    module.exports = {
    variants: {
        extend: {
            opacity: ['disabled'],  // Añadimos disabled
        },
    },
}

  4. Verifica el cambio de estilo: Después de personalizar el botón, notaremos que su opacidad o color cambia para indicar que está deshabilitado.

Implementar estas configuraciones permite a los desarrolladores tener un control más granular sobre los estilos de su aplicación, mejorando la accesibilidad y experiencia del usuario. Además, siempre es recomendable visitar la documentación oficial de Tailwind CSS para conocer más sobre otras variantes y pseudo clases que puedes aplicar en tus proyectos.