Bordes
Utilidades para controlar el estilo del contorno de un elemento.
| Clase | Estilos |
|---|---|
outline-solid | outline-style: solid; |
outline-dashed | outline-style: dashed; |
outline-dotted | outline-style: dotted; |
outline-double | outline-style: double; |
outline-none | outline-style: none; |
outline-hidden | outline: 2px solid transparent;
outline-offset: 2px; |
Utiliza utilidades como outline-solid y outline-dashed para establecer el estilo del contorno de un elemento:
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">Botón A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Botón B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Botón C</button><button class="outline-3 outline-offset-2 outline-double ...">Botón D</button>Utiliza la utilidad outline-hidden para ocultar el contorno predeterminado del navegador en los elementos enfocados, conservando al mismo tiempo el contorno en el modo de colores forzados:
Intenta emular `forced-colors: active` en tus herramientas de desarrollador para ver el comportamiento
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />Se recomienda encarecidamente aplicar tu propio estilo de enfoque para fines de accesibilidad al usar esta utilidad.
Utiliza la utilidad outline-none para eliminar por completo el contorno predeterminado del navegador en los elementos enfocados:
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Deja un comentario..." /> <button class="..." type="button">Publicar</button></div>Se recomienda encarecidamente aplicar tu propio estilo de enfoque para fines de accesibilidad al usar esta utilidad.
Antepone a la utilidad outline-style 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-dashed ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.