Variantes

Las Variantes te permiten aplicar algunas variaciones a tus reglas existentes, como la variante hover: de Tailwind CSS.

Ejemplo

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // cortar el prefijo `hover:` y pasarlo a las siguientes variantes y reglas
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher controla cuándo se habilita la variante. Si el valor de retorno es una cadena, se usará como el selector para hacer coincidir las reglas.
• selector proporciona la disponibilidad de personalizar el selector CSS generado.

Bajo el capó

Hagamos un recorrido de lo que sucedió al hacer coincidir hover:m-2:

• hover:m-2 se extrae del uso de los usuarios
• hover:m-2 se envía a todas las variantes para hacer coincidencia
• hover:m-2 coincide con nuestra variante y devuelve m-2
• el resultado m-2 se usará para la siguiente ronda de coincidencia de variantes
• si no se hace coincidir con otra variante, m-2 irá a hacer coincidir las reglas
• nuestra primera regla coincide y genera .m-2 { margin: 0.5rem; }
• finalmente, aplicamos la transformación de nuestras variantes al CSS generado. En este caso, anteponemos :hover al hook selector

Como resultado, se generará el siguiente CSS:

.hover\:m-2:hover { margin: 0.5rem; }

Con esto, podríamos tener m-2 aplicado solo cuando los usuarios pasen el cursor sobre el elemento.

Ir más allá

El sistema de variantes es muy poderoso y no se puede cubrir completamente en esta guía, puedes consultar la implementación del preset por defecto para ver usos más avanzados.