Utilidades

Helpers pequeños que cubren patrones recurrentes en componentes: voltear, transiciones semánticas, fondos a pantalla completa, áreas clicables y custom variants basadas en :has() y :focus-within.

Flip

Voltea elementos horizontal o verticalmente. Internamente aplica scaleX(-1) o scaleY(-1).

<img class="flip-w" src="arrow.svg" alt="">
<svg class="flip-h">...</svg>

Clase	Efecto
`.flip-w`	Voltea horizontalmente (`scaleX(-1)`).
`.flip-h`	Voltea verticalmente (`scaleY(-1)`).

Duraciones de transición

Clases semánticas para transition-duration, alineadas con los tokens de motion.

Clase	Valor	Uso
`.duration-fast`	120 ms	Hovers cortos, feedback inmediato.
`.duration-base`	200 ms	Por defecto en componentes.
`.duration-slow`	320 ms	Transiciones de estado, modales.
`.duration-slower`	480 ms	Coreografías, énfasis.

Imagen de fondo

.bg-image convierte un <img> en imagen de fondo a pantalla completa con z-index negativo. Se usa dentro de secciones con contenido superpuesto.

<section class="relative">
  <img class="bg-image" src="hero.jpg" alt="">
  <div>
    <h1 class="display">Título sobre la imagen</h1>
  </div>
</section>

Equivale a absolute inset-0 w-full h-full object-cover -z-1. El padre necesita position: relative.

Click Parent

Hace clicable todo el contenedor a través de un pseudo-elemento ::after que cubre el área completa. Útil en cards con un único link principal.

<article class="card relative">
  <h3>Título</h3>
  <p>Descripción.</p>
  <a class="click-parent" href="/post">Leer más</a>
</article>

El padre necesita position: relative para que el ::after cubra el área esperada.

Focus from Child

El contenedor recibe estilos visuales cuando un hijo tiene foco. Ideal para cards con links internos donde quieres que el card entero refleje el estado de foco.

<article class="card focus-from-child">
  <h3>Título</h3>
  <a href="/post">Leer artículo</a>
</article>

Usa :focus-within, que se activa con cualquier hijo focusable (links, botones, inputs).

Custom variants

FDS define custom variants de Tailwind v4 vía @custom-variant para aplicar estilos basados en el estado del padre.

<div class="card group">
  <h3 class="parent-hover:text-primary-600">Título</h3>
  <p class="parent-focus-within:opacity-100 opacity-60">...</p>
</div>

Variant	Selector	Uso
`parent-hover:`	`:has(:hover)` en el padre	Reaccionar a hover del contenedor.
`parent-focus-within:`	`:has(:focus-within)`	Reaccionar al foco interno.
`parent-checked:`	`:has(:checked)`	Estados activos en cards seleccionables.

Compatibilidad

La variant parent: usa :has(), soportado en navegadores modernos. No funciona en IE ni en navegadores legacy.

Eyebrow

Etiqueta pequeña para categorías o labels que se coloca encima de un título.

<p class="eyebrow">Categoría</p>
<h2 class="heading">Título de sección</h2>

Aplica text-transform: uppercase, letter-spacing amplio, font-size reducido y un color semántico de soporte.