Visibilidad en Tailwind

Tailwind CSS proporciona clases de utilidad para controlar la visibilidad de un elemento.

Tabla de contenidos:

Clases disponibles en Tailwind para controlar la visibilidad e un elemento

Las clases disponibles en Tailwind CSS para controlar la visibilidad de un elemento son las siguientes:

Clase CSS Propiedades CSS
.visible visibility: visible;
.invisible visibility: hidden;

Cuándo usar cada clase?

Responsividad

Para aplicar las utilidades de visibilidad dependiendo del tamaño del dispositivo podemos añadir el prefixo con el tamaño de pantalla al que la propiedad debe aplicar.

<div class="flex justify-center">
  <div class="bg-green-400"></div>
  <div class="bg-green-600 visible sm:invisible md:visible lg:invisible xl:visible"></div>
  <div class="bg-green-400"></div>
</div>

Deshabilitar las utilidades de visibilidad en Tailwind CSS

Si no planeas utilizar las utilidades de visibilidad que ofrece tailwind, las puedes desactivar modificando el valor de la propiedad visibility en la sección corePlugins de tu fichero de configuración de tailwind a Falso

Ejemplo:

module.exports = {
  corePlugins: {
    // ...
   visibility: false,
  }
}

¡Si te ha gustado comparte y comenta!