🚀 :has(> &) en Tailwind 4

¿Necesitas que un componente aplique utilidades directamente a su elemento padre?
Así puedes pasar de CSS puro a Tailwind 4.

🔧 CSS puro

*:has(> .card) {
  background-color: gray;
}

⚡ Tailwind 4 – Selector rápido

<div class="card [*:has(>&)]:bg-gray-100">
  <div class="@md:grid @md:grid-cols-[1fr_22rem]">
    <!-- contenido -->
  </div>
</div>

⭐ Tailwind 4 – Variante (RECOMENDADA)

Configuración (una vez):

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

Uso (limpio y legible):

<div class="card parent:bg-gray-100 parent:p-4">
  <div class="@md:grid @md:grid-cols-[1fr_22rem]">
    <!-- contenido -->
  </div>
</div>

✨ Resultado: puedes aplicar cualquier utilidad de Tailwind al elemento padre de forma automática.

La variante es más legible, reutilizable y sigue la misma lógica que hover: o group:.