outline-offset

Ejemplos

Ejemplo básico

Usa utilidades como outline-offset-2 y outline-offset-4 para cambiar el desplazamiento del contorno de un elemento:

<button class="outline-2 outline-offset-0 ...">Button A</button>
<button class="outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-2 outline-offset-4 ...">Button C</button>

Usando un valor personalizado

Usa la sintaxis outline-offset-[<value>] para establecer el outline offset basado en un valor completamente personalizado:

<div class="outline-offset-[2vw] ...">
  <!-- ... -->
</div>

Para variables CSS, también puedes usar la sintaxis outline-offset-(<custom-property>) :

<div class="outline-offset-(--my-outline-offset) ...">
  <!-- ... -->
</div>

Esto es solo un atajo para outline-offset-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Diseño Responsive

Prefija una utilidad outline-offset con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="outline md:outline-offset-2 ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.