Custom variants

FDS define 3 custom variants de Tailwind para responder al estado del padre o para aplicar estilos al padre desde un hijo directo. Son utiles en cards, enlaces ampliados, formularios compactos y patrones donde no quieres anadir clases auxiliares como group al contenedor.

parent

parent:* aplica la utilidad al padre que contiene el elemento como hijo directo:

@custom-variant parent (*:has(> &));

<div>
  <span class="parent:bg-blue-100 parent:p-8">Hijo</span>
</div>

En este caso, el div recibe el fondo y el padding porque contiene un hijo con la variant.

parent-hover

parent-hover:* aplica estilos al hijo cuando su padre recibe hover:

@custom-variant parent-hover (*:hover > &);

<article class="card card-outline">
  <h3 class="subheading-sm parent-hover:text-primary-500">
    Titulo que reacciona al hover de la card
  </h3>
</article>

parent-focus-within

parent-focus-within:* responde cuando el padre contiene el foco:

@custom-variant parent-focus-within (*:focus-within > &);

<label class="card card-outline">
  <span class="parent-focus-within:text-primary-500">Email</span>
  <input class="parent-focus-within:border-blue-500" type="email" />
</label>

<div class="grid grid-auto-fit-md gap-columns">
  <article class="card card-outline group">
    <h3 class="subheading-sm parent-hover:text-primary-500">
      Cambia al hacer hover sobre el padre
    </h3>
    <p class="text-medium">
      La variant parent-hover permite responder al estado del contenedor.
    </p>
  </article>

  <label class="card card-outline">
    <span class="subheading-sm parent-focus-within:text-primary-500">Campo con focus</span>
    <input class="mt-4 w-full rounded-md border border-neutral-300 px-4 py-3 parent-focus-within:border-blue-500" placeholder="Escribe aqui" />
  </label>
</div>

Casos de uso

Diferencia con group

Las variants group-* de Tailwind requieren una clase group en el padre y seleccionan descendientes. Las variants de FDS se basan en :has() y trabajan con el hijo directo:

<!-- Tailwind group -->
<article class="group">
  <h3 class="group-hover:text-primary-500">Titulo</h3>
</article>

<!-- FDS parent-hover -->
<article>
  <h3 class="parent-hover:text-primary-500">Titulo</h3>
</article>

Usa group-* si necesitas afectar descendientes profundos o compatibilidad mas amplia. Usa parent-* si quieres markup mas limpio y el elemento afectado es hijo directo.

Compatibilidad

Estas variants dependen de :has(). Los navegadores modernos lo soportan, pero si necesitas compatibilidad con navegadores antiguos, deja una experiencia base valida sin depender exclusivamente de la variant.