Tailwind Z-Index

Tailwind z-index proporciona clases de utilidad para controlar el ordren de visibilidad de un elemento.

Tabla de contenidos:

Clases disponibles en Tailwind para controlar Z-Index

Las clases disponibles en Tailwind CSS para controlar el valor de la propiedad z-index son las siguientes:

Clase CSS Propiedades CSS
.z-0 z-index: 0;
.z-10 z-index: 10;
.z-20 z-index: 20;
.z-30 z-index: 30;
.z-40 z-index: 40;
.z-50 z-index: 50;
.z-auto z-index: auto;
#ad

Te quedas sin anuncio!

Customizar clases Z-Index en Tailwind CSS

Las clases mencionadas en el apartado anterior, son las que hay por defecto en tailwind, pero se pueden customizar editando la sección theme.zIndex de la configuración tailwind (NOTA: El fichero de configuración de tailwindcss suele llamarse tailwind.config.js)

Ejemplo:

module.exports = {
  theme: {
    zIndex: {
     '0': 0,
     '10': 10,
     '20': 20,
     '30': 30,
     '40': 40,
     '50': 50,
     '25': 25,
     '50': 50,
     '75': 75,
     '100': 100,
     '200': 200,
     '300': 300,
     '400': 400,
     'auto': 'auto',
    }
  }
}

En este ejemplo hemos añadido diferentes clases css customizadas como por ejemplo z-100 o z-200

Deshabilitar Z-Index en Tailwind CSS

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

Ejemplo:

module.exports = {
  corePlugins: {
    // ...
   zIndex: false,
  }
}
#ad

Te quedas sin anuncio!

¡Si te ha gustado comparte y comenta!