Tailwind CSS Interactividad Referencia completa

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita. La utilidad de interactividad Tailwind CSS proporciona clases como Tailwind CSS Appearance que controlan. Esta clase se usa principalmente para cursores, ya que es interactiva con otro elemento.

El siguiente ejemplo le dará una breve idea sobre la interactividad de Tailwind CSS:

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">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Cursor Class</b>
    <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex
                          items-stretch
                          bg-green-200 border-solid border-4
                          border-green-900 gap-4">
        <div class="cursor-auto bg-blue-600
                    w-full h-8 rounded-lg">
            Hover over
        </div>
        <div class="cursor-default bg-yellow-600
                    w-full h-8 rounded-lg">
            Hover over
        </div>
        <div class="cursor-pointer bg-purple-600
                    w-full h-8 rounded-lg">
            Hover over
        </div>
        <div class="cursor-wait bg-green-600
                    w-full h-8 rounded-lg">
            Hover over
        </div>
    </div>
</body>
  
</html>

Producción:

Tailwind CSS Interactividad

Publicación traducida automáticamente

Artículo escrito por hardikkoriintern y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta