Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Esta clase se utiliza para controlar el contorno de un elemento.
Clases de esquema:
- contorno-ninguno: esta clase se utiliza para ocultar el contorno del navegador predeterminado en los elementos enfocados.
- contorno-blanco: esta clase se usa para agregar un borde punteado blanco de 2 píxeles alrededor de un elemento con un desplazamiento de 2 píxeles.
- contorno-negro: esta clase se usa para agregar un borde punteado negro de 2 píxeles alrededor de un elemento con un desplazamiento de 2 píxeles.
Sintaxis:
<element class="outline-{style}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Outline Class</b> <div class="mx-6 bg-green-200 grid grid-rows-3 grid-flow-col text-justify p-4"> <input class="placeholder-gray-500 p-3 m-2 rounded-lg border-2 border-green-400 bg-green-100 focus:outline-none" placeholder="Ouline-none"> <input class="placeholder-gray-500 p-3 m-2 rounded-lg border-2 border-green-400 bg-green-100 focus:outline-white" placeholder="Ouline-white"> <input class="placeholder-gray-500 p-3 m-2 rounded-lg border-2 border-green-400 bg-green-100 focus:outline-black" placeholder="Ouline-black"> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA