A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Tailwind CSS 2020

Curso de Tailwind CSS 2020

Víctor Yoalli Domínguez

Víctor Yoalli Domínguez

Entendiendo las variantes y las pseudo-clases

14/29
Recursos

Aportes 10

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Aquí esta el código que agrega de la documentación

<button class="disabled:opacity-75 bg-blue-500">
  Submit
</button>

El segundo código que agrega

variants: {
    opacity: ['responsive', 'hover', 'focus', 'disabled'],
  },

link de la documentación:
https://tailwindcss.com/docs/pseudo-class-variants/#app

Es importante tomar en cuenta que al colocar las variantes extras, se deben colocar también las que trae por defecto debido a que el arreglo de variantes no se combina con el arreglo de las variantes por defecto.

Si están utilizando el fichero de configuración tailwind.config.full.js ya está agregada la variante de opacity.

Buscar la l√≠nea y agregar ‚Äėdisabled‚Äô.

f

Variantes: Instrucciones para que el dise√Īo cambie dependiendo del evento (html)

  • Responsive: se ejecuta al cambio de resoluci√≥n u orientaci√≥n
  • Hover: se ejecuta cuando colocamos el cursor encima o fuera de un elemento
  • Focus: se ejecuta cuando el elemento tiene el foco
  • Disabled: se ejecuta cuando el elemento es deshabilitado

Pseudo-Class: Palabra clave que se a√Īade a la clase para lograr un dise√Īo deseado

  • Responsive: sm, md, lg, xl
  • Hover: hover
  • Focus: focus
  • Disabled: disabled

¬ŅAlguien sabe por qu√© a mi no me refleja los cambios? no se aplica el disabled

Si no les funciona el disabled, no se olviden de hacer:

npm run build

en su carpeta del proyecto.

Buena explicación!