opacity

Ejemplos

Ejemplo básico

Utiliza 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>

Aplicar condicionalmente

Antepone a la utilidad opacity el prefijo de una variante como disabled:* para aplicar la utilidad únicamente en ese estado:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.

Usar un valor personalizado

Usa la sintaxis opacity-[<value>] para establecer el/la opacity basándose 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 añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad opacity el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

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

Obtén más información sobre el uso de variantes en la documentación de variantes.