Esquema CSS de Tailwind

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *