outline-width

Ejemplos

Ejemplo básico

Usa utilidades outline u outline-<number> como outline-2 y outline-4 para establecer el ancho del contorno de un elemento:

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

Aplicando en focus

Prefija una utilidad outline-width con una variante como focus:* para aplicar la utilidad solo en ese estado:

<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

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

Usando un valor personalizado

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

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

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

<div class="outline-(length:--my-outline-width) ...">
  <!-- ... -->
</div>

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

Diseño Responsive

Prefija una utilidad outline-width 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-2 ...">
  <!-- ... -->
</div>

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