opacity

Ejemplos

Ejemplo básico

Usa utilidades opacity-<number> como opacity-25 y opacity-100 para establecer la opacidad de un elemento:

<button class="bg-indigo-500 opacity-100 ..."></button>
<button class="bg-indigo-500 opacity-75 ..."></button>
<button class="bg-indigo-500 opacity-50 ..."></button>
<button class="bg-indigo-500 opacity-25 ..."></button>

Aplicando condicionalmente

Prefija una utilidad opacity con una variante como disabled:* para aplicar la utilidad solo en ese estado:

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

Aprende más sobre el uso de variantes en la documentación de variantes.

Usando un valor personalizado

Usa la sintaxis opacity-[<value>] para establecer el opacity basado en un valor completamente personalizado:

<button class="opacity-[.67] ...">
  <!-- ... -->
</button>

Para variables CSS, también puedes usar la sintaxis opacity-(<custom-property>) :

<button class="opacity-(--my-opacity) ...">
  <!-- ... -->
</button>

Esto es solo un atajo para opacity-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad opacity con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<button class="opacity-50 md:opacity-100 ...">
  <!-- ... -->
</button>

Aprende más sobre el uso de variantes en la documentación de variantes.