outline-width

Ejemplos

Ejemplo básico

Utiliza utilidades outline o outline-<number> como outline-2 y outline-4 para establecer el grosor del contorno de un elemento:

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

Aplicar al enfocar

Antepone a la utilidad outline-width el prefijo de una variante como focus:* para aplicar la utilidad únicamente en ese estado:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Usar un valor personalizado

Usa la sintaxis outline-[<value>] para establecer el/la grosor del contorno basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad outline-width el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.