No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Entendiendo las variantes y las pseudo-clases

14/29
Recursos

Aportes 11

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥榙isabled鈥.

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

f

驴Alguien sabe por qu茅 a mi no me refleja los cambios? no se aplica el disabled

si que va a estar bueno diferenciar las variantes con las pseudoclases.

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

npm run build

en su carpeta del proyecto.

Buena explicaci贸n!