Utilities — FDS Docs

Flip

Voltea elementos horizontal o verticalmente con .flip-w y .flip-h. Usa scaleX(-1) y scaleY(-1) internamente.

Original

.flip-w

.flip-h

HTML

<!-- Original -->
<img src="arrow.svg" alt="Arrow">

<!-- Volteo horizontal -->
<img src="arrow.svg" class="flip-w" alt="Arrow flipped">

<!-- Volteo vertical -->
<img src="arrow.svg" class="flip-h" alt="Arrow flipped">

Implementación

CSS utility/core/utilities.css

@utility flip-w {
  transform: scaleX(-1);
}

@utility flip-h {
  transform: scaleY(-1);
}

Duraciones de Transición

Clases semánticas para transition-duration. Pasa el cursor sobre las barras para ver la diferencia de velocidad en cada nivel.

.duration-none

0ms

.duration-faster

100ms

.duration-fast

200ms

.duration-normal

300ms

.duration-slow

400ms

.duration-slower

500ms

HTML

<div class="transition duration-faster">100ms</div>
<div class="transition duration-fast">200ms</div>
<div class="transition duration-normal">300ms</div>
<div class="transition duration-slow">400ms</div>
<div class="transition duration-slower">500ms</div>

Referencia de duraciones

Clase	Duración	Uso recomendado
`.duration-none`	0ms	Sin transición (override)
`.duration-faster`	100ms	Feedback inmediato: tooltips, focus rings
`.duration-fast`	200ms	Hover states, cambios de color
`.duration-normal`	300ms	Default general, transforms
`.duration-slow`	400ms	Paneles, drawers, modals
`.duration-slower`	500ms	Animaciones de entrada complejas

Imagen de Fondo

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

HTML

<section class="relative">
  <img src="hero.jpg" class="bg-image" alt="">
  <div>
    <h1>Contenido sobre la imagen</h1>
    <p>La imagen cubre toda la sección por detrás.</p>
  </div>
</section>

Qué aplica la clase

Internamente, .bg-image equivale a las siguientes propiedades de Tailwind:

CSS components/components.css

.bg-image {
  @apply absolute inset-0 size-full object-cover -z-1;
}

El contenedor padre necesita position: relative (clase .relative de Tailwind) para que el posicionamiento absoluto funcione correctamente.

Click Parent

Hace clickeable todo el contenedor a través de un pseudo-elemento ::after que cubre toda el área. El primer <a> dentro del contenedor se convierte en el target de click.

HTML

<div class="relative">
  <a href="/articulo" class="click-parent">Titulo del articulo</a>
  <p>Descripcion del articulo...</p>
</div>

Implementación

CSS components/components.css

.click-parent {
  outline: none !important;
}

.click-parent::after {
  content: "";
  position: absolute;
  cursor: pointer;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

El contenedor padre necesita position: relative para que el ::after se posicione correctamente sobre todo el área.

Focus from Child

El contenedor recibe estilos visuales cuando un hijo tiene foco. Ideal para cards con links internos donde quieres feedback visual en toda la card al navegar con teclado.

HTML

<div class="focus-from-child rounded-lg border p-6">
  <h3><a href="/articulo">Titulo del articulo</a></h3>
  <p>Cuando el link recibe foco, toda la card muestra shadow y borde.</p>
</div>

Implementación

CSS components/components.css

.focus-from-child {
  position: relative;
  transition: all 700ms !important;
}

.focus-from-child:focus-within {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-neutral-300);
}

.focus-from-child:hover {
  cursor: pointer;
}

Usa :focus-within internamente, que se activa cuando cualquier hijo focusable recibe foco (links, botones, inputs).

Variantes Personalizadas

Variantes personalizadas de Tailwind definidas en main.css que permiten aplicar estilos basados en el estado del elemento padre.

Definición

CSS main.css

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

Uso en HTML

HTML

<!-- Cambiar padding del padre cuando contiene este hijo -->
<div class="parent:p-8">
  <span>Este span hace que el padre tenga p-8</span>
</div>

<!-- Estilizar hijo cuando el padre recibe hover -->
<div>
  <span class="parent-hover:text-primary-500">
    Se pone color primario al hacer hover en el padre
  </span>
</div>

<!-- Estilizar hijo cuando el padre tiene focus-within -->
<div>
  <input type="text">
  <span class="parent-focus-within:opacity-100">
    Aparece cuando el input recibe foco
  </span>
</div>

Referencia de variants

Variant	Se activa cuando	Ejemplo de clase
`parent:`	El padre contiene al elemento como hijo directo	parent:p-8
`parent-hover:`	Se hace hover sobre el elemento padre	parent-hover:text-primary-500
`parent-focus-within:`	El padre tiene un hijo con foco	parent-focus-within:opacity-100

Estas variants usan @custom-variant de Tailwind CSS v4. La variant parent: usa :has(), que tiene soporte en todos los navegadores modernos pero no en IE o navegadores legacy.

Eyebrow

Etiqueta pequeña para categorías o labels que se coloca encima de un título. Típicamente usada en heroes o cards para indicar sección o tipo de contenido.

Categoría

HTML

<span class="eyebrown">Categoria</span>
<h1>Titulo principal de la seccion</h1>
<p>Descripcion debajo del titulo.</p>

Implementación

CSS components/custom.css

.eyebrown {
  @apply border rounded-md py-1 px-3 text-sm uppercase;
}

Esta clase está definida en components/custom.css dentro del layer components. Hereda el color de texto y borde del contexto, así que se adapta al tema automáticamente.