Tailwind CSS Opacidad del texto

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Usando esta clase podemos establecer la opacidad de cualquier texto. En CSS, hacemos eso usando la propiedad CSS Opacity .

Opacidad del texto:

text-opacity-0: controle la opacidad del color del marcador de posición de un elemento utilizando las utilidades text-opacity-{amount} .

Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.

Sintaxis:

<element class="text-{opacity}">...</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 Text Opacity Class</b>
    <div class="mx-14 bg-green-200 grid grid-rows-4
                grid-flow-col text-justify p-4">
      <p class="text-green-800 text-opacity-100 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-green-800 text-opacity-75 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-green-800 text-opacity-50 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-green-800 text-opacity-25 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-yellow-800 text-opacity-100 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-yellow-800 text-opacity-75 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-yellow-800 text-opacity-50 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-yellow-800 text-opacity-25 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-pink-800 text-opacity-100 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-pink-800 text-opacity-75 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-pink-800 text-opacity-50 p-2">
        A Computer Science Portal for Geeks
      </p>
  
      <p class="text-pink-800 text-opacity-25 p-2">
        A Computer Science Portal for Geeks
      </p>
    </div>
  </body>
</html>

Producción:

Opacidad

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta